Why props are not updated after dispatch?

After dispatch, in the store is not updated component. Ie using DevToolsExtension you can see that the store updated, but the component is not prinimaet 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);</componentaddform>
June 8th 19 at 16:36
1 answer
June 8th 19 at 16:38
Solution
You muterule an array of tasks which pass into the component. When new properties after the upgrade store, in the component in which you deliver it are checked:
this.props.tasks === nextProps.tasks; // true
It returns true, as this same array and the component is not updated.

Correct way:
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 improve their actionCreators. Put the payload in the key 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
});


Reducer then 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;
}
}
Certainly not once thought that the problem with the array, thanks a lot - Daisha_Schneider28 commented on June 8th 19 at 16:41

Find more questions by tags ReactRedux