使用reducer更新Redux中的特定狀態

Question

我想知道，如何更新狀態中的特定值。 我有狀態配置，我想更新“偏移”值而不修改限制或總值，只需使用this.props.setParams（）設置新的偏移即可。

使用此功能，我想修改offset this.props.setParams（{offset：10}），或限制this.props.setParams（{limit：40}），依此類推...只需發送一個參數並直接修改准國家。

searchList.js

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

行動，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
    };
}

減速器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
        }
    }
};

我的減速器中如何有更多的“泛型”產品？ 沒有指定特定的屬性，但是更具全局性。

只需在我的動作創建者中發送一個對象“ params”，例如：this.props.setParams（{offset：30，total：120}）？

Answer 1

實際行為

您的代碼正在添加newFilters和newParams作為屬性。 這樣，您將必須按以下方式訪問offset ：

state.config.params.newParams.offset

解

要直接使用這些新的過濾器或參數

state.config.params.offset

您應該在擴展newFilters使用傳播語法 ...傳播newFilters和newParams ：

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

和

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

傳播語法將增加（或更換）的有效載荷，內性能newFilters和newParams ，要的屬性state.config.filters和state.config.params分別。

改進

為了簡化您的減速器，您可以直接傳播action.payload並刪除一些可能不必要的傳播：

行動，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
            }
        }
    };
...