Why props are not updated after dispatch?

Question

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>

Daisha_Schneider28 asked June 8th 19 at 16:36

Related questions

More answers about "Why props are not updated after dispatch?"

1 answer

Lenny.Botsfo answered on · Accepted Answer · 2019-06-08T16:38:39.121Z

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