useSelector 在分派动作 React Redux 后不更新

Question

我知道已经有几个与此类似的问题，但所提供的解决方案都不适用于我。 我正在我的 React Native 组件中调度一个动作，但是当我之后尝试使用 useSelector 访问状态时，它仍然只是之前的状态，而不是更新的状态。

我的组件：

const userSettings = useSelector((state: any) => state.user.settings);

const loadUserSettings = async () => {
    await dispatch(userActions.fetchUserSettings());
}

const checkUserEnabled = async () => {
    await loadUserSettings();
    
    // The old state shows here rather than the updated one
    console.log(userSettings.enabled)
}

这是我的减速器：

const initialState = {
    settings = UserSettings,
};

export default (state = initialState, action) => {
    switch (action.type) {
        case SET_USER_SETTINGS:
            return {
                ...state,
                settings: action.settings,
            };
        default:
            return state;
    }
};

Answer 1

userSettings 是一个陈旧的闭包，因为 Nicolas 建议您不能分派操作并期望状态值立即更改，因为在每个操作之后都会创建一个新状态，并且您当前的函数仍在使用状态的旧值。 当组件重新渲染时，它将使用新的状态值重新渲染。