Learn React Hooks

Defining the reducer

Next, we define a reducer function for the user state. For now, we are going to place our reducers in the src/App.js file.

Later on, it might make sense to create a separate src/reducers.js file, or even a separate src/reducers/ directory, with separate files for each reducer function.

Let's start defining the userReducer function:

1. In the src/App.js file, before the App function definition, create a userReducer function for the user state:

function userReducer (state, action) {

2. Again, we use a switch statement for the action type:

    switch (action.type) {

3. Then, we handle the LOGIN and REGISTER actions, where we set the user state to the given username value. In our case, we simply return the username value from the ...