在 react native 中实现 redux

Question

我正在尝试实现 redux 以在多个屏幕中显示平衡，因为我在单个屏幕中更新平衡应该反映在所有其他屏幕/组件中。

我对@9​​87654323@ 还很陌生。如您所知，redux 很复杂，甚至难以实现。

我遵循了 GitHub 和 youtube 中的一些示例并开始实施它。

在 Actions 文件夹下 我有。以下两个文件

counteractions.js

  import * as types from './actionTypes.js';

//ActionCreator methods

export function updateBalance(balanceInfo) {

    return {
        type: types.LEDGER_BALANCE,
        payLoad: { balanceInfo }
    }
}

在 Reducers 文件夹下。我有这个文件

balance.js

import * as types from '../actions/actionTypes.js';
    const initialState = {
        balance: 0
    }

    // reducer  functions .. accepts  current/initial state , actions and  returns new state



    const balanceReducer=(state,action)=>
    {
        switch (action.type) {
            case types.LEDGER_BALANCE:
                return {
                    balance: action.payload.balanceInfo
                }
                break;
            default:
                break;
        }
    }

    export default balanceReducer;

在 ConfigureStore.js 中

import {createStore} from 'redux';
import rootReducer from './reducers/index.js';

    import balanceReducer from './reducers/balance.js';

    const initailState = {
        balance: 0,
    }

    export const store=createStore(balanceReducer,balanceReducer);

App.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import { Provider } from 'react-redux';
    //Provider - makes redux store  available to connect() class in component hierarchy below
    import { applyMiddleware, createStore, compose, combineReducers } from "redux";
    import thunkMiddleware from 'redux-thunk';
    import createLogger from 'redux-logger';
    import rootReducer from './reducers/index.js';
    //import store from './configureStore.js';

    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      TextInput
    } from 'react-native';
    import ReduxDemo from "./reduxDemo.js";
    import { store, reducer } from './balanceDemo.js';

    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
      'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
      'Shake or press menu button for dev menu',
    });

    export default class App extends Component<{}> {

      constructor(props) {
        super(props);
        this.state = {
          balancelocal: '',
        }
      }



      _updateLedger = () => {
        // store.dispatch({ type: 'BALANCE', payLoad: '500' });
        store.dispatch({ type: 'BALANCE', payLoad: 'Your balance is 8000 MUR' });
      }


      render() {

        store.subscribe(() => {

          this.setState({
            balancelocal: store.getState(),
          })
          //this.balanceInfo = store.getState().balance;
         // alert(this.state.balancelocal);
        });
        return (
          <View style={styles.container}>
            <TouchableOpacity onPress={this._updateLedger}>
              <Text>Update balance</Text>
            </TouchableOpacity>

            <TextInput style={{height:100,width:400}} value={this.state.balancelocal}/>
          </View>
        );
      }
    }

它的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

我还没有完成配置商店文件。和。我想知道，我必须在哪里订阅和调度操作......

我想通过点击 app.js 中的按钮来更新余额 我有。自动更新另一个页面中的余额..

请指导我理解和实现redux。请建议更好的文件夹结构和更好的方式来实现redux。

Answer 1

https://redux.js.org/basics/exampletodolist
上面的链接有一个基本的 react with redux 设置。 React Native 也差不多。

您需要将 App 组件包装在从“react-redux”导入的 Provider 中，然后将其提供给 AppRegistry。此外，您似乎没有导入任何操作，也没有使用连接功能。就像上面的评论一样，你最好通过一个关于 redux 基础的视频指南。它会帮助你理解所有的复杂性，一旦你理解了，没有什么比 redux 更容易了。一切顺利。