不确定如何正确更新 Redux 中的状态

Question

我不确定如何在 redux 中正确更新 state。我收到重复的条目。

这就是 state 的样子

const STATE = {
    windowOne: { ... }
    windwoTwo: { ... }
    windowThree: { ... }
}

那是我的减速机之一

export default function reducer(state = STATE, action) {
    switch (action.type) {
        case type.WINDOW_ONE: {
            return {
                ...state,
                windowOne: {
                    ...state.windowOne,
                    foo: action.bar,
                }
            }
        }
    }
}

我将 state like 映射到我组件的 props

function mapDispatchToProps(dispatch) {
    return bindActionCreators(combinedActions, dispatch);
}

const mapStateToProps = state => {
    const { windowOne } = state.windowOne;

    return {
        windowOne,
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);

我在这里结合了各种减速器

export default combineReducers({
    windowOne,
    windowTwo,
    windowThree
});

当我使用 redux-logger 时，我看到 windowOne 中复制了整个 state。在那里，在触发 action 之后，我找到了 windowTwo 和 windowThree。我也不确定为什么我必须在这些行中指定 windowOne

    const { windowOne } = state.windowOne;

const { windowOne } = state 还不够吗？这可能与...

Answer 1

为 combineReducers 检查 docs；它负责向每个 reducer 发送适当的状态片段并合并结果。对于所示的 reducer，这意味着您应该仅将 windowOne 的初始状态传递给它，而 return 只是 windowOne:

的更新状态

export default function reducer(state = STATE.windowOne, action) {
    switch (action.type) {
        case type.WINDOW_ONE: {
            return {
                ...state,
                foo: action.bar,
            }
        }
    }
}

在此之后，mapStateToProps 中的 const { windowOne } = state 应该可以工作。另请注意，每个 reducer 都需要一个 default case，因为所有 reducer 都会收到所有操作，并且 STATE 可能更适合命名为 initialState。

不确定如何正确更新 Redux 中的状态

Not sure how to update State in Redux properly

javascript

flux

redux

react-redux