下面是一个示例代码,展示了如何编写一个reducer函数,以不可变的方式将新项目添加到嵌套的存储属性中:
const initialState = {
nested: {
items: []
}
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_ITEM':
return {
...state,
nested: {
...state.nested,
items: [...state.nested.items, action.payload]
}
};
default:
return state;
}
};
// 使用示例
const store = Redux.createStore(reducer);
store.dispatch({
type: 'ADD_ITEM',
payload: 'new item'
});
console.log(store.getState());
在上面的代码中,initialState
定义了初始状态,其中nested
属性是一个对象,包含一个items
数组。
reducer函数使用switch
语句来处理不同的action类型。当action类型为ADD_ITEM
时,我们使用展开运算符(spread operator)来创建一个新的状态对象,并通过嵌套的展开运算符将nested
属性复制到新对象中。然后,在新对象中,我们通过展开运算符将items
数组复制到新数组中,并将新项目action.payload
添加到新数组的末尾。
最后,我们使用Redux的createStore
函数创建了一个存储,并通过store.dispatch
方法派发了一个ADD_ITEM
类型的action,将一个新项目添加到嵌套的存储属性中。
运行上述代码后,控制台将输出新的状态对象,其中nested
属性的items
数组中包含了新添加的项目。
上一篇:编写一个React组件,创建一个七天一周的列表,我们可以在点击一天时删除它。
下一篇:编写一个任务,使用Gradle.build文件来比较两个Swagger.yaml文件的Swagger-Diff。