2
votes

Comment ajouter un objet à l'index du tableau dans le réducteur

J'ai un magasin avec des tableaux ( store.calendar [0] .todos [{title: title, etc ...}] )

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

J'ai besoin pour ajouter un objet d'action aux todos d'index du tableau: J'ai essayé avec ce réducteur, mais j'obtiens une erreur:

state.calendar [newTodo.day] .concat n'est pas une fonction

Mon réducteur:

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

Mon action:

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;

Ma fonction add todo: p>

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

javascript arrays react-redux redux redux-store

0 commentaires

3 Réponses :

0
votes

Essayez plutôt state.calendar [newTodo.day] .todo.concat (newTodo) . Je pense que vous essayez de .concat () sur l'objet {todo: Array (0)} plutôt que sur le tableau à l'intérieur.

0 commentaires

-1
votes

vous pouvez essayer ceci:

Réducteur:

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;

0 commentaires

2
votes

Vous devez changer votre état de manière totalement immuable.

Pour cela, vous devez copier le tableau du calendrier, le jour que vous mettez à jour dans ce calendrier et la liste de tâches que vous êtes ajouter à.

Commencez par obtenir le jour et todoItem , vous pouvez utiliser la déstructuration:

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));

Ensuite, copiez votre calendrier, vous pouvez utiliser la syntaxe de diffusion pour cela:

return { ...state, calendar };

Ensuite, mettez à jour le jour concerné avec une copie pour ce jour, et ajoutez la nouvelle tâche à la liste of todos:

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

Puis retourne l'état mis à jour:

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

Voici un exemple:

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

0 commentaires