如何在Reducer的数组索引处添加对象

时间:2019-03-20 20:36:21

标签: javascript arrays redux react-redux redux-store

我存储有数组(store.calendar[0].todos[{title: title, etc...}]

    0: {todos: Array(0)}
    1: {todos: Array(0)}
    2: {todos: Array(0)}
    3: {todos: Array(0)}
    4: {todos: Array(0)}

我需要将操作对象添加到数组的索引待办事项中: 我已经尝试过使用该减速器,但出现错误:

  

state.calendar [newTodo.day] .concat不是函数

我的减速器:

let initialState = { calendar: []}

for (let i = 1; i <= 30; i++) {
  initialState.calendar.push({ todos: []});
}

const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      const newTodo = action.todoItem;
      const newStore = {...state,
            todos: state.calendar[newTodo.day].concat(newTodo)};
      return newStore;
    default:
      return state
  }
}

export default todosReducer;

我的动作

export const addTodoAction = (todoItem) => {
  return {
    type: ADD_TODO,
    todoItem
  }
}

我的添加待办事项功能:

const handleSaveTodo = () => {
    props.addTodo({ 
      day: 5,
      title: trackInput.value,
      description: trackTextarea.value,
      completed: false
    });
}

3 个答案:

答案 0 :(得分:1)

您需要以完全不变的方式更改状态。

为此,您必须复制日历数组,此日历中要更新的日期以及要附加到的待办事项列表。

首先获取daytodoItem,可以使用解构:

const { todoItem } = action;
const { day } = todoItem;

然后复制日历,您可以为此使用传播语法:

const calendar = [...state.calendar];

然后使用当日的副本更新相关的日期,并将新的待办事项附加到待办事项列表中:

calendar[day] = { ...calendar[day], todos: [...calendar[day].todos, todoItem] };

然后返回更新状态:

return { ...state, calendar };

这里是一个示例:

const ADD_TODO = 'add-todo';

const initialState = { calendar: Array.from({ length: 30 }, (_, i) => ({ todos: [] })) };

const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      const { todoItem } = action;
      const { day } = todoItem;
      const calendar = [...state.calendar];
      calendar[day] = { ...calendar[day], todos: [...calendar[day].todos, todoItem] };
      return { ...state, calendar };
    default:
      return state
  }
}

let state = initialState;

state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 0, title: 'todo day 1' } });
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 1, title: 'todo day 2' } });
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 2, title: 'todo day 3' } });
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 2, title: 'second todo day 3' } });

console.log(state.calendar.slice(0, 3));

答案 1 :(得分:0)

改为尝试state.calendar[newTodo.day].todo.concat(newTodo)。我认为您正在尝试将.concat()放到对象{todo:Array(0)}而不是其中的数组上。

答案 2 :(得分:-1)

您可以尝试以下方法:

减速器:

const initialState = { 
  calendar: Array.from({length: 30}, () => ({ todos: [] }))
}

const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      const { todoItem } = action;
      const newCalendar = [...state.calendar];
      newCalendar[todoItem].todos.push(todoItem);
      
      return {
        ...state,
        calendar: newCalendar
      }
    default:
      return state
  }
}

export default todosReducer;