Why aren't props updated after dispatch?

Question

React

After dispatch, the component is not updated in the store. That is, through DevToolsExtension, you can see that the store has been updated, but the component does not accept new props.
action.js

export default function add(time, task, id){
  if(!task || !time){
    return {
      type: "SET_ERROR",
      text: "Error, invalid data"
    }
  }
  return{
    type: "ADD_TASK",
    id: id,
    time: time,
    task: task
  }
}

reducer.js

let minute = [1,2,4];
let initialState = {
  add: false,
  tasks : [
    {id: 1, time: new Date().toString(), task : 'Some text 1'},
    {id: 2, time: new Date().toString(), task : 'Some text 2'},
    {id: 3, time: new Date().toString(), task : 'Some text 3'}
  ]	
};
export default function addDelete(state = initialState, action){
  switch (action.type) {
    case "ADD_TASK":{
      const newState ={...state};
      newState.tasks.push({id: action.id, time : action.time, task: action.task});
      return newState;
    }
    case "DELETE_TASK" :{ 
      let newState = {...state};
      newState.tasks.splice(action.id - 1, 1);
      return newState;
    }
    case "SET_ACSSES" : {
      return {
        ...state,
        add: !state.add
      }
    }
    default:
      return state;
  }
}

well, the component itself

import React, {Component} from 'react';
import {connect} from 'react-redux';
import addTask from '../actions/addTask';
import ComponentAddForm from '../components/AddForm';

class AddForm extends Component{
  render(){
    return(
      <ComponentAddForm error = {this.props.errors} add = {this.props.add} id={this.props.id + 1}/>	
    );
  }
}
const mapStateToProps = (state) => ({
  errors: state.errors.text,
  id: state.addDelete.tasks[state.addDelete.tasks.length-1].id
});
const mapDispatchToProps = {
  add : addTask
};

export default connect(mapStateToProps, mapDispatchToProps)(AddForm);

Answer 1

You are mutating the tasks array that you pass into the component. When getting new properties, after updating the store, in the component you pass it to, a check occurs: It returns true , since this is the same array and the component is not updated. Fix like this:

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

But it will be even better if you fix your actionCreators . Put the payload in the payload key :

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

Then the reducer code will be like this:

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