• Почему не обновляются props после dispatch?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Вы мутируете массив tasks который передаете в компонент. При получении новых свойств, после обновления стора, в компоненте в который вы предаете его происходит проверка:
    this.props.tasks === nextProps.tasks; // true
    Она возвращает true, так как это тот же самый массив и компонент не обновляется.

    Исправьте так:
    export default function addDelete(state = initialState, action){
      switch (action.type) {
        case "ADD_TASK":
          return {
            ...state,
            tasks: [...state.tasks, {{id: action.id, time : action.time, task: action.task}}],
          };
        case "DELETE_TASK":
          return {
            ...state,
            tasks: [...state.tasks.filter(task => task.id != action.id)],
          };
        case "SET_ACSSES":
          return {
            ...state,
            add: !state.add,
          };
        default:
          return state;
      }
    }


    Но будет еще лучше, если поправите свои actionCreators. Кладите полезную нагрузку в ключ payload:
    export default function add(time, task, id){
      if(!task || !time){
        return {
          type: "SET_ERROR",
          payload: "Error, invalid data"
        };
      }
    
      return{
        type: "ADD_TASK",
        payload: {
          id: id,
          time: time,
          task: task,
        },
      }
    }


    export const deleteTask = id => ({
      type: 'DELETE_TASK',
      payload: id,
    });


    Тогда код редьюсера будет такой:
    export default function addDelete(state = initialState, action) {
      const { type, payload } = action;
    
      switch (type) {
        case "ADD_TASK":
          return {
            ...state,
            tasks: [...state.tasks, payload],
          };
        case "DELETE_TASK":
          return {
            ...state,
            tasks: [...state.tasks.filter(task => task.id != payload)],
          };
        case "SET_ACSSES":
          return {
            ...state,
            add: !state.add,
          };
        default:
          return state;
      }
    }
    Ответ написан
    1 комментарий