如何替换部分 Redux 状态

Question

我有一个 packageReducer，它保存了 packageType 和 packageList 的相关细节。从服务器获取详细信息后，我需要用获取的新值替换初始状态值。例如，如果提取了 packageLists，我只需要替换 "packageList"

下面是我的 PackageState reducer，

const initialState = {
    packageList: packageListInitialState,
    packageTypes: [{title: 'Select Package Type', value: ''}],
};

export default function packageState( state = initialState, action ) {
    switch ( action.type ) {
        case FETCH_PACKAGE_LIST_SUCCESS:{
            return Object.assign( {}, state,  action.payload );
        }

        case FETCH_PACKAGE_TYPES_SUCCESS:{
           return Object.assign( {}, state,  action.payload );
        }

        default:
            return state;
    }
}

我认为我实现的方式正在替换整个状态，有人可以告诉我如何实现它吗？

谢谢你。

Answer 1

假设您要实现的操作只是 FETCH_PACKAGE_LIST_SUCCESS 操作，有效负载是 updated/fetched 列表，那么您只需要 return 如下图所示的对象。

由于您正在尝试 return 一个仅更改了两个属性之一的对象，因此您可以使用先前状态的值作为未更改的属性并更新另一个。

const initialState = {
    packageList: packageListInitialState,
    packageTypes: [{title: 'Select Package Type', value: ''}],
};

export default function packageState( state = initialState, action ) {
    switch ( action.type ) {
        case FETCH_PACKAGE_LIST_SUCCESS:{
            return { packageList: action.payload, packageTypes: state.packageTypes }
        }

        case FETCH_PACKAGE_SETTINGS_SUCCESS:{
           return Object.assign( {}, state,  action.payload );
        }

        default:
            return state;
    }
}

Answer 2

你不是：

var state = {a: 1, b: 2, c: 3}
var newData = {a: 4, b: 5}
console.log(Object.assign( {}, state,  newData )) // { a: 4, b: 5, c: 3 }

Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources' properties will similarly overwrite earlier ones. (docs)

因此，只要您的负载包含您真正想要更新的密钥，您就是安全的。如果您使用 ES6 的 spread syntax（我假设您的有效载荷看起来像 {packageList: data}），您也可以以更简单的方式进行操作：

const initialState = {
    packageList: packageListInitialState,
    packageTypes: [{title: 'Select Package Type', value: ''}],
};

export default function packageState( state = initialState, action ) {
    switch ( action.type ) {
        case FETCH_PACKAGE_LIST_SUCCESS:{
            return {...state, ...action.payload};
        }

        case FETCH_PACKAGE_SETTINGS_SUCCESS:{
           return {...state,  ...action.payload};
        }

        default:
            return state;
    }
}

如何替换部分 Redux 状态

How to replace part of the Redux state

reducers

reactjs

redux