Mise à jour du State de Reducer

11 Oct Mise à jour du State de Reducer

Suite à notre dernier tutoriel, on va créer 2 boutons pour faire l’incrémentation et la décrémentation du notre count.

// Component Home
render() {
    console.log(this.props);
    return (
      <div>
        Home Page {this.props.count}
        <button onClick={this.props.increase}> + </button>
        <button onClick={this.props.decrease}> - </button>
      </div>
    );
}

increase et decrease sont deux props qu’on va les mettre  dans une function qu’on la nomme mapDispatchToProps ci dessous

const masDispatchToPorps = (dispatch) => {
  return {
    increase: () => dispatch({type: 'INCREASE'}),
    decrease: () => dispatch({type: 'DECREASE'})
  }
}

Et finalement, on injecte la function mapDispatchToProps dans la partie connect

export default connect(mapStateToPorps, masDispatchToPorps)(Home);

Maintenant, on va éditer le fichier rootReducer.js de tel sorte qu’on va faire des tests sur le type de l’action qu’on va  les recevoir

const initState = {
    count: 0
}
const rootReducer = (state = initState, action) => {
    if(action.type === 'INCREASE'){
        return {count : state.count + 1 }
    }else if (action.type === 'DECREASE'){
        return {count : state.count - 1 }
    }else{
        return state;
    }
}
export default rootReducer;