[英]Update value of nested Redux reducer object
我有一個關於Redux和更新嵌套對象的值的問題。
假設這是我的初始狀態:
const INITIAL_STATE = {
columnState: {
1: {
loading: false
},
2: {
loading: false
}
}
};
當我的減速器被調用時:
case COLUMN_STATE_UPDATE:
const { type } = payload;
return {
...state
}
}
如何更新特定ID的loading
值? 假設我用鍵= 2更新了條目,如何使用鍵2將columnState對象的loading
值更改為true
,並返回新狀態?
如果您的COLUMN_STATE_UPDATE
操作僅更新columnState
部分(假定payload
中的type
為鍵):
case COLUMN_STATE_UPDATE:
const { type } = payload;
return {
...state, // keep the other keys as they were
[type]: { // only update the particular one
loading: true
}
}
}
如果您的COLUMN_STATE_UPDATE
操作正在更新看起來像INITIAL_STATE
的整個狀態(同樣,假設payload
中的type
為鍵):
case COLUMN_STATE_UPDATE:
const { type } = payload;
return {
...state, // keep the other keys of state as they were
columnState: {
...state.columnState, // keep the other keys of columnState as they were
[type]: { // only update the particular one
loading: true
}
}
}
}
case COLUMN_STATE_UPDATE:
// payload = {type: 1, 1: {loading: true}}
const {type} = payload;
return {
columnState: {...state.columnState, [type]: payload[type] }}
};
以上可以實現為:
/**
* @param {Object} state The Global State Object of shape:
* @example
* const INITIAL_STATE = {
* columnState: {
* 1: {
* loading: false
* },
* 2: {
* loading: false
* }
* }
* };
* @param {Object} action The Action Object of shape
* @example
* let action = {type: 1, 1: {loading: true}};
* @returns {Function} The "slice reducer" function.
*/
function columnStateUpdate(state = {}, action) {
const {type} = action;
switch(type) {
case COLUMN_STATE_UPDATE:
return {
columnState: {...state.columnState, [type]: action[type] }}
};
}
}
我使用action
而不是payload
因為(state, action)
是Redux Docs中使用的標准命名約定
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.