![](/img/trans.png)
[英]How to update state ( initial State ) objects in reducer when using immer?
[英]How to implement Reducer when store initial state is an Array?
我试图了解 React-Redux 基础知识,但我陷入了这种特殊情况:
我的代码操作:
let todoId = 1
export const ADDTODO = 'AddTodo'
export const REMOVETODO = 'RemoveTodo'
export const TOINPROGRESS = 'ToInProgress'
export const TODONE = 'ToDone'
export function addTodo(payload){
return{
type: ADDTODO,
payload:{
status: 'Todo',
id: todoId++,
title: payload.title,
date:payload.date,
description:payload.description,
place:payload.place
}
}
}
export function removeTodo(todoId){
return{
type: REMOVETODO,
payload:todoId
}
}
export function toInProgress(todoId){
return{
type: TOINPROGRESS,
payload:todoId
}
}
export function toDone(todoId){
return{
type: TODONE,
payload:todoId
}
}
我尝试减少代码:
import { addTodo, removeTodo, toInProgress, toDone } from '../actions';
const initialState = [];
const todos = (state = initialState, action) => {
switch(action.type) {
case 'AddTodo':
return[
...state, {
date:action.payload.date,
description:action.payload.description,
id:action.payload.id,
place:action.payload.place,
status:action.payload.status,
title:action.payload.title,
}
]
case 'RemoveTodo':
console.log(state)
return {
...state,
todos: state.todos.filter(todo => todo.id !== action.id)
}
case 'ToInProgress':
state.map(todo =>(todo.id===action.id)?{...todo,status:"InProgress"}:todo)
case 'ToDone':
state.map(todo =>(todo.id===action.id)?{...todo,status:"Done"}:todo)
default:
return state
}
}
todos reducer 的唯一工作方法是 AddTodo,无法弄清楚 RemoveTodo、ToInProgress 和 ToDo 的工作方式。 我在 RemoveTodo 上收到一个 TypeError,上面写着“无法读取未定义的属性‘过滤器’”......并且未定义从另外两个方法返回。 你们能给我一些帮助吗? 提前问候,请忘记我糟糕的语法和编码
在您的情况下, state 是一个数组,因此state.todos将是未定义的。 您可以使用类似的方法修复“RemoveTodo”案例
case 'RemoveTodo':
return state.filter(todo => todo.id !== action.payload)
在其他情况下您错过了return
,并且您不需要将每个属性分配出去action.payload
只需按原样传递它,这就是它的外观
const todos = (state = initialState, action) => {
switch (action.type) {
case "AddTodo":
return [...state, action.payload];
case "RemoveTodo":
return state.filter((todo) => todo.id !== action.payload.id);
case "ToInProgress":
return state.map((todo) =>
todo.id === action.payload.id
? { ...todo, status: "InProgress" }
: todo
);
case "ToDone":
return state.map((todo) =>
todo.id === action.payload.id ? { ...todo, status: "Done" } : todo
);
default:
return state;
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.