Question

在我使用redux的本机应用程序中，reducers似乎工作正常，但UI不会更新状态修改。

这是我的减速机：

const initialState = {
  userId: 1,
  userName: "nobody",
  showIntroOnNextStart: true
}

export default function reducer(state = initialState, action) {

    switch(action.type) {
        case 'INCREMENT':
            let newState = {
                ...state,
                userId: state.userId + 1
            };
            console.log(newState);
            return newState;

    }
    return state;
}

它将通过以下方式导出和导入：

import userProfile from './userProfile'

export { userProfile }

这是我的连接方法：

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

所以最终状态如下：

在我的应用程序组件的render-method中，我将状态传递给子组件：

render() {
    const { state, actions } = this.props;
    return ....lots of scenes...
            <Scene key="home" component={HomeScreen} title="Home" state={state} {...actions} />

在特定的场景组件中，我使用这样的状态：

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

    return (
        <View {...this.props}  style={styles.container}>

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

            <Button onPress={increment}>Increment</Button>
        </View>
    );
}

增量操作正常工作，每个console.log-Output显示一个具有正确递增值的新状态对象。

但视图不会更新。在reducer-function中，状态按预期工作，并在每次调用时递增userId。但是在渲染函数中，状态对象值从一开始就保持不变。

这里可能出现什么问题？

更新

当我从react-native-router-flux中删除此Router-Stuff时，一切正常。状态将是同一个实例并将更新。但只要将组件封装到路由器的场景中，状态更新就不会发生

Answer 1

从Redux的限定时间开始，未渲染的问题通常是对象不变的参考。如果您有深层对象，则需要进行深层复制。我个人喜欢将immutable.js用于任何反应状态。

您可以尝试缩小问题的另一个方法是在按下Increment后在组件上调用this.forceUpdate（）。如果它更新了视图，那么这将使您更接近找出问题所在。

Answer 2

更改状态不会立即更新，只会将其置于挂起状态。

根据我的经验，由于实际更新状态的智能组件与显示状态的哑组件之间断开连接，因此无法显示更新。在大多数情况下，您应该让智能容器将应用程序状态传递给其组件：在此实例中，您的app组件将递增的id传递给场景。我无法立即看到的是handleOnPress功能所在的位置。理想情况下，您希望将状态和onPress函数都传递给场景，这样当它们单击它时，它会调用应用程序容器中的操作，这将更新状态并触发重新渲染。

希望这有点帮助，我没有立即发现您在此处提供的代码有任何问题，但这可能与您将这些代码连接在一起的方式有关。

Answer 3

你能试试吗？告诉我结果......

案例＆＃39; INCREMENT＆＃39;： let newState = Object.assign（ {}， ...州， userId：state.userId + 1 ）; 的console.log（newState）; return newState;

Answer 4

您是否可能在某个时候使用导航仪？我注意到Navigator创建了一次场景，即使数据在此之后发生了变化，即使状态更新，它也不一定会在安装后重新创建场景。我的临时解决方案（完全丢弃导航器之前）是使用this.forceUpdate（）。它不是一个理想的解决方案，但可以完成工作。

Answer 5

您需要连接到redux store，将状态映射到场景组件中的props

React / Redux：修改后的状态未在视图

更新

5 个答案: