使用 react-native-router-flux 和 redux，如何更新视图组件中的状态？

Question

问题：

我尝试过结合react-native-router-flux提供的路由使用redux。

简而言之，它不起作用：

• redux 状态修改不会出现在视图中，但可以成功记录到控制台
• 每次执行操作时，都会重新创建包含场景的整个组件树，这会导致控制台中出现大量警告，提示已经创建了带有“xyz”键的场景。

我做了什么：

我使用了react-native-router-flux官方的示例应用，并添加了一个基于redux的简单反例：

• 一个简单的状态：“计数器”（可能是一个整数）
• reducers 和 action（增量、减量）

下面我会展示一些代码，也有人会在 github 上找到我的example application，请随时查看：https://github.com/itinance/react-native-router-flux。 “示例” 目录是原始示例应用程序。 "ExampleRedux" 是带有 redux 堆栈和示例 reducer（计数器）的示例的副本，我在这里说的是。

主应用程序组件，带有提供者和商店：

import * as reducers from './components/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);

const store = createStoreWithMiddleware(reducer);

export default class Example extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <ExampleContainer/>
          </Provider>
        );
    }
}

我的减速机：

const initialState = {
  count: 0
};

export default function counter(state = initialState, action = {}) {

  switch (action.type) {
      case "INCREMENT":
        console.log("do increment", state,
            {
                ...state,
                count: state.count + 1
            }
        );

      return {
        ...state,
        count: state.count + 1
      };
    case "DECREMENT":
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
}

redux“connect”的内部应用容器：

我将状态和动作传递给场景组件：

<Scene key="launch" component={Launch} title="Launch" initial={true} state={state} {...actions} />

这个 ExampleContainer 的全部代码：

class ExampleContainer extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const { state, actions } = this.props;
        console.log("Props", this.props, state, actions); // everything ok here

        return <Router createReducer={reducerCreate}>
            <Scene key="modal" component={Modal} >
                <Scene key="root" hideNavBar={true}>
                    <Scene key="echo" clone component={EchoView} />
                    <Scene key="register" component={Register} title="Register"/>
                    <Scene key="home" component={Home} title="Replace" type="replace"/>
                    <Scene key="launch" component={Launch} title="Launch" initial={true} state={state} {...actions} />
                    .... lots of other scenes ...
                    </Scene>
                </Scene>
                <Scene key="error" component={Error}/>
            </Scene>
        </Router>;
    }
}


export default connect(state => ({
   state: state.counter
 }),
 (dispatch) => ({
   actions: bindActionCreators(actions, dispatch)
 })
)(ExampleContainer);

这是非常简单的 LaunchScreen，具有简单的计数器功能（以及用于演示路由的示例路由）：

class Launch extends React.Component {

    constructor(props) {
        super(props);
        console.log(props);
    }

    render(){
        const { state, increment, decrement } = this.props;

        console.log("Props 2: ", this.props, state, increment, decrement);

        return (
            <View {...this.props}  style={styles.container}>
                <Text>Launch page</Text>

                <Text>{state.count}</Text>

                <Button onPress={increment}>Increment</Button>

                <Button onPress={()=>Actions.login({data:"Custom data", title:"Custom title" })}>Go to Login page</Button>
                <Button onPress={Actions.register}>Go to Register page</Button>
                <Button onPress={Actions.register2}>Go to Register page without animation</Button>
                <Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
                <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
               <Button onPress={Actions.pop}>back</Button>
            </View>
        );
    }
}

点击增量按钮时，动作被完美调度。在控制台中，可以成功记录新状态。每点击一次，它就会一一递增。但不在视图中。

当我省略路由器和场景并仅将启动屏幕作为单个组件激活时，一切正常。

问题：

如何让这个 redux 应用程序正常工作，让视图正确更新它们的状态？

为了完整起见，整个代码可以在github找到。

Answer 1

您可能忘记将Launch 组件连接到商店。你想做的和你在ExampleContainer做的类似，即

export default connect(state => ({
   state: state.counter
 }),
 (dispatch) => ({
   actions: bindActionCreators(actions, dispatch)
 })
)(Launch);

然后正确的值将显示在您的日志中