In this lesson we'll walk through setting up an updater function that can receive an action argument. We'll also dive into how to separate your state management logic into a separate reducer function much like how Redux operates. It will receive an action which we can add any data and update state accordingly.

 

import React, { Component } from "react";const INCREMENT = "INCREMENT";const DECREMENT = "DECREMENT";const reducer = action => (state, props) => {  switch (action.type) {    case INCREMENT:      return {        value: state.value + action.amount,      };    case DECREMENT:      return {        value: state.value - 1,      };    default:      return null;  }};class App extends Component {  state = {    value: 0,  };  increment = () => {    this.setState(      reducer({        type: INCREMENT,        amount: 2      }),    );  };  decrement = () => {    this.setState(      reducer({        type: DECREMENT,      }),    );  };  render() {    return (      
     
        
      
       {
   this.state.value}
      
        
      Increment        
      Decrement      
     
    );  }}export default App;