javascript - 使用 reducer 更新 Redux 中的特定状态

Question

我想知道如何更新状态中的特定值。我有我的状态配置，我想在不修改限制或总值的情况下更新“偏移”值，只需使用 this.props.setParams() 设置新的偏移量...

有了这个函数，我想修改 offset this.props.setParams({ offset: 10}), 或者 limit this.props.setParams({ limit: 40}), 等等... 只需发送一个参数和直接修改关联状态。

searchList.js

this.props.setParams({ offset: 10})

actions-search.js

export function setFilters(newFilters) {
    return {
        type   : SEARCH.SET_NEW_FILTERS,
        payload: newFilters
    };
}

export function setParams(newParams) {
    return {
        type   : SEARCH.SET_NEW_PARAMS,
        payload: newParams
    };
}

reducer-search.js

...

    /*State : CONFIG*/
    /*config: {
        filters : {
            ...
        }
        params: {
            offset: 0,
            limit: 25,
            total: 100
        }
    }*/

case SEARCH.SET_NEW_FILTERS :
    let newFilters = action.payload;

    return {
        ...state,
        config: {
            ...state.config,
            filters : {
                ...state.config.filters,
                newFilters
            }
            params : {
                ...state.config.params
            }
        }
    };
case SEARCH.SET_NEW_PARAMS :
    let newParams = action.payload; // {offset: 10}

    return {
        ...state,
        config: {
            ...state.config,
            filters : {
                ...state.config.filters
            }
            params : {
                ...state.config.params,
                newParams
            }
        }
    };
....

目前，我必须这样写:

return {
    ...state,
    config: {
        ...state.config,
        params : {
            ...state.config.params,
            offset : newParams.offset
        }
    }
};

我怎样才能在我的 reducer 中有更多的“通用”？没有指定特定的属性，但更全局。

只需在我的 action creator 中发送一个对象“params”，例如:this.props.setParams({offset: 30, total: 120}) ?

Answer 1

实际行为

您的代码正在添加 newFilters 和 newParams 作为属性。这样你就必须访问 offset 作为:

state.config.params.newParams.offset

解决方案

直接访问那些新的过滤器或参数

state.config.params.offset

您应该传播 newFilters 和 newParams，使用 spread syntax ...，在你的 reducer 中:

            filters : {
                ...state.config.filters,
                ...newFilters
            }

和

            params : {
                ...state.config.params,
                ...newParams
            }

传播语法将添加(或替换)您的有效载荷的内部属性，newFilters 和 newParams，到 state.config.filters< 的属性 和 state.config.params 分别。

改进

为了简化您的 reducer ，您可以直接传播 action.payload 并删除一些可能不必要的传播:

actions-search.js

...

case SEARCH.SET_NEW_FILTERS :
    return {
        ...state,
        config: {
            ...state.config,
            filters : {
                ...state.config.filters,
                ...action.payload
            }
        }
    };
case SEARCH.SET_NEW_PARAMS :
    return {
        ...state,
        config: {
            ...state.config,
            params : {
                ...state.config.params,
                ...action.payload
            }
        }
    };
...