Learn React Hooks

Reducers

Now, we still need to define the function that handles these state changes. Such a function is known as a reducer function. It takes the current state and action as arguments, and returns a new state.

If you are aware of the Redux library, you will already be very familiar with the concept of state, actions, and reducers.

Now, we are going to define our reducer function:

1. We start with the function definition of our reducer:

function reducer (state, action) {

2. Then, we check for action.type using a switch statement:

    switch (action.type) {

3. Now, we are going to handle the TOGGLE_EXPAND action, where we simply toggle the current expandPosts state:

        case 'TOGGLE_EXPAND':            return { ...state, expandPosts: !state.expandPosts }

4. Next, ...