反应天然redux.状态正在更新，但该组件尚未被授予

Question

我正在使用redux的应用程序。

在以下片段中我切换附加条件：

...
render() {
    const { appEnabled } = this.props;
    const { updatePreferences } = this.props;
    return (
        <View style={styles.preferences}>
                <Text>App enabled: {appEnabled + ''}</Text>
                <Button onPress={() => updatePreferences({ appEnabled: !appEnabled })}>Toggle AppEnabled</Button>
        </View>)
}

这是映射功能：

function mapStateToProps({ preferences }) {
    return {
        appEnabled: preferences.appEnabled,
    };
}
function mapDispatchProps(dispatch) {
    return {
        getPreferences,
        updatePreferences: (preferences) => dispatch(updatePreferencesAction(preferences))
    };
}
export default connect(mapStateToProps, mapDispatchProps)(PreferenceScreen);

状态的更新正常。但是没有发生组件的重新读取。

我知道常见原因可能是意外状态突变。我确保REDUCER函数每次都会返回新对象：

export default function preferenceReducer(state = { ...defaultState }, action = {}) {
    // console.log("reduces is called")
    switch (action.type) {
        case UPDATE_PREFERENCES :
            return { ...state, ...action.preferences };
        default:
            return state;
    }
}
// Action creators
export function updatePreferencesAction(preferences) {
    return { type: UPDATE_PREFERENCES, preferences };
}

在我的情况下，该组件未被放置的原因是什么？

Answer 1

很难不看到完整代码，如果添加jsfiddle，则更容易提供帮助。

无论如何，您的组件看起来不错，当道具更改时，它应该更新。您在还原器中更新状态的方式似乎是唯一有些奇怪的。我不能仅通过查看降量来就可以说出您的状态的形状，但是，例如，为什么要执行state = {...defaultState}而不是state = defaultState？

return {...state, ...action.preferences }也是可疑的。在大多数情况下，状态是这样更新的：return { ...state, preferences: action.preferences }，因为它使您的还原器更清晰。

我建议您进行这些更改，然后与Redux Devtools进行彻底调试。

Answer 2

更改

function mapStateToProps({ preferences }) {
return {
    appEnabled: preferences.appEnabled,
};

}

to

function mapStateToProps({ appEnabled }) {
return {
    appEnabled: appEnabled,
};