如何在React中更新redux状态的特定切片
How to Update specific slice of redux state in React
在使用redux和react-redux更新状态时,我似乎遇到了一个障碍。当我更新单个状态片时,所有其他状态片都会被删除。我知道这个问题的答案很简单,但是我想不出来,也没有在网上找到任何其他的东西。
为了澄清,这是我的减速器:
const initialState = {
selectedLevel: null,
selectedVenue: null,
selectedUnitNumber: null,
selectedUnitName: null,
selectedYear: null
}
export default (state = initialState, action) => {
console.log('reducer: ', action);
switch (action.type){
case 'CHOOSE_LEVEL':
return action.payload;
case 'CHOOSE_VENUE':
return action.payload;
case 'CHOOSE_UNIT':
return action.payload;
case 'SHOW_COURSES':
return action.payload;
}
return state;
}
和我的联合减速机:
export default combineReducers({
workshopSelection: WorkshopSelectReducer
});
我的初始状态是这样的
workshopSelection: {
selectedLevel: null,
selectedVenue: null,
selectedUnitNumber: null,
selectedUnitName: null,
selectedYear: null
}
但是当我使用动作创建器时,例如:
export function chooseVenue(venue){
return {
type: 'CHOOSE_VENUE',
payload: {
selectedVenue: venue
}
}
}
最后的状态是这样的:
workshopSelection: {
selectedVenue: 'London',
}
该对象中未受此操作创建者影响的所有其他状态已被完全清除。相反,我只希望所有其他条目保持其原始值—本例中的null
,或分配给它们的任何其他值。
希望这一切都有意义。
干杯!
你基本上是用另一个对象(你的有效负载,也是一个对象)替换一个对象(以前的状态)。
在标准JS中,这将相当于你的减速器所做的:
var action = {
type: 'CHOOSE_VENUE',
payload: {
selectedVenue: venue
}
};
var state = action.payload;
解决这个问题最简单的方法是使用对象扩展属性:
export default (state = initialState, action) => {
switch (action.type){
case 'CHOOSE_LEVEL':
case 'CHOOSE_VENUE':
case 'CHOOSE_UNIT':
case 'SHOW_COURSES':
// Watch out, fall-through used here
return {
...state,
...action.payload
};
}
return state;
}
…但由于这仍处于实验阶段,您必须使用其他方法来克隆先前的属性,然后覆盖新属性。双for ... in
环可以是一个简单的环:
export default (state = initialState, action) => {
switch (action.type){
case 'CHOOSE_LEVEL':
case 'CHOOSE_VENUE':
case 'CHOOSE_UNIT':
case 'SHOW_COURSES':
// Watch out, fall-through used here
const newState = {};
// Note: No key-checks in this example
for (let key in state) {
newState[key] = state[key];
}
for (let key in action.payload) {
newState[key] = action.payload[key];
}
return newState;
}
return state;
}
让您的有效负载对象与操作创建者保持一致,如下所示…
export function chooseVenue(venue){
return {
type: 'CHOOSE_VENUE',
selectedVenue: venue
}
}
和修改你的reducer如下(给出的例子是更新场地,对其他情况也做同样的…)
export default (state = initialState, action) => {
let newState = Object.assign({}, state); // Take copy of the old state
switch (action.type){
case 'CHOOSE_LEVEL':
case 'CHOOSE_VENUE':
newState.selectedVenue = action.selectedVenue; // mutate the newState with payload
break;
case 'CHOOSE_UNIT':
case 'SHOW_COURSES':
default :
return newState;
}
return newState; // Returns the newState;
}
相关文章:
- 事件和状态
- 获取选择框的状态
- 相位器状态未捕获参考错误
- 如何更改reactjs中外部/独立组件的状态或属性
- 如何使用密码检测网络中的状态连接
- Ember.js-接口状态应该存储在哪里
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- XMLHttpRequest未返回值-状态202
- 使用javascript反复检查用户在facebook上的登录状态
- 如何使bxslider仅在移动视图中处于活动状态
- 获取ASP.NET Ajax Timer状态
- React redux初始化功能,无论状态变化如何
- 对不同的数组进行切片并返回选定的值
- 无法在现有状态转换期间更新-未使用任何非法的setState()
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 从组件状态的数组中删除元素
- iOS 中的按钮触摸状态
- 如何在React中更新redux状态的特定切片