Redux reducer prevState 已经设置为 newState答案

【问题标题】：Redux reducer prevState already set up to newStateRedux reducer prevState 已经设置为 newState
【发布时间】：2018-06-07 10:32:01
【问题描述】：

我正在使用 redux 将搜索过滤器通过应用程序移动到组件。

我有一个组件，我在其中设置过滤器并使用调用调度功能

this.props.dispatch(setFilter(newFilter));

我使用滑块/范围组件来设置值，这些组件具有 handleAfterChange 方法，该方法设置为调用上述调度函数。这工作正常。

我还有通过单击按钮设置的过滤器，我创建了onClick 处理程序，并且这个处理程序调用提到了函数。我检查了我发送给setFilter 函数（newFilter）参数的内容，这是我想要设置的。

我的设置动作已定义：

export const setFilter = (filter = {}) => {
    return {
        type: SET_FILTER,
        filter
    };
};

我的减速器是：

const searchFilter = (prevState = INITIAL_STATE.filter, action) => {
    switch (action.type) {
        case SET_FILTER: {
            // prevState is already the state 
            // I want to set up in this reducer
            console.log(prevState);
            return  Object.assign({}, prevState, action.filter);

        }
        case RESET_FILTER: {
            return INITIAL_STATE.filter;
        }
        default: {
            return prevState;
        }
    }
};

问题是 prevState 已经是我想在 reducer 中设置的对象。我正在检查（在另一个组件中）过滤器是否已更改，因此我得到 prevProps 和 nextProps 相同，因此不会触发任何操作。

因此，以某种方式分派的更改已经作为 prevProps 在 reducer 中。

【问题讨论】：

不确定你的意思，大多数人称 prevState 只是简单的 state，因为它是 reducer 的当前状态。如果它已经更新，那么你更新了它，你为什么不看看 Chrome devtools 的 Redux 标签（如果你没有它，请安装），看看有什么更新它？
我使用 redux 日志记录工具，我可以在其中查看有关 redux 事务的信息 - 上一个状态、操作和下一个状态。不知道为什么prev状态已经是需要设置的状态了。我还按照您的建议将 Redux devTools 安装到 chrome 中，我可以看到那里只触发了一个操作，prevState 和 nextState 的差异是我希望更改的。

标签： reactjs redux react-redux

【解决方案1】：

在searchFilter reducer 中，您将返回prevState，因为它没有发生变异。

return prevState    //which is reference to prevState = INITIAL_STATE.filter

正确的方式（不确定状态结构），

 default: {
        return {...prevState};
     }

或

 return  Object.assign({}, prevState);

【讨论】：

是的，但是如果操作类型不是 SET_FILTER 或 RESET_FILTER 不是这种情况，因为它涉及到 action.type 是 SET_FILTER 的情况
最初你的默认情况被执行，所以，参考在没有减速器的情况下得到更新，对 RESET_FILTER 也使用上述方法。它会工作
这不是真的，如果你不需要修改状态，那么就原封不动地返回它。否则你会导致 React 做不必要的渲染协调。
@DominicTobias 同意，但技巧部分是参考在没有 action-disatach 的情况下更新
@RIYAJKHAN 你说对了一部分。不知何故，我直接修改了 redux 存储，即使我通过 Object.assign(...) 进行了所有对象修改。最后，我必须创建我正在修改的对象的副本 - JSON.parse(JSON.stringify(filter))，然后更新这个新对象并将其分派到 redux 存储。

【解决方案2】：

@RIYAJKHAN 部分正确。

不知何故，我直接修改了 redux 存储，即使我通过 Object.assign(...) 进行了所有对象修改。最后，我必须创建我正在修改的对象的副本 - JSON.parse(JSON.stringify(filter))，然后更新这个新对象并将其分派到 redux 存储

【讨论】：