Question

我正在使用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中使用。

Answer 1

在searchFilter reducer中，您将返回prevState，而不会发生变异。

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

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

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

OR

 return  Object.assign({}, prevState);

Answer 2

@RIYAJKHAN部分正确。

即使我通过Object.assign(...)进行了所有对象修改，我仍然以某种方式直接修改redux存储。最后，我必须创建要修改的对象的副本-JSON.parse(JSON.stringify(filter))，然后更新此新对象并将其分派到redux存储区

Redux reducer prevState已设置为newState

2 个答案: