Redux Actions and Reducers

Overview for Redux Actions and Reducers

Last week, you began learning about Redux. You took a look at how it manages the state for your React Application through the use of a single store, reducers and actions.

Redux – Manages application state through the use of a single store, reducers, and actions.

But what are actions exactly?

Redux Actions – Plain JavaScript objects containing payloads of information to be sent to the Redux store.

Actions are the only way that updates get sent to the store. The only required property for an action object is type – the type will be a unique String

Best practice: Gather all action types into a separate module.

Here is an example of an actiontypes.js module in it’s final form. There are multiple benefits to this approach. Primarily you are able to easily see all the action types in one place, which is very helpful when there are multiple developers on a project. You can see in one file all the different kinds of changes to the state that have already been implemented in the app.

DISPATCHING AN ACTION

An action gets dispatched by a React component in response to some user interaction with the view. This could be the user loading the view in the browser for the first time. Clicking on a button, submitting a form etc.

React components will dispatch an action in response to some user interaction – eg. loading a new view, clicking a button, etc.

When Redux is used with React, you will never dispatch the action directly. Instead you will use the connect function to do it for you by providing it with an argument that’s typically called mapDispatchToProps . We will discuss mapDispatchToProps in more detail later.

In react-redux, you will never dispatch the action directly-you will supply an argument called mapDispatchToProps to the connect() function, which will call the store’s dispatch method for you.

Every time that an action is dispatched, a new action object must be created.

There is a special type of function in Redux called an action creator and is used to create action objects. It is not required to use action creators to create objects, but it is helpful in making sure that objects are always created in a consistent way and to prevent typographical errors.

Typically, you will write a function called an action creator that will create the object in a consistent, error-free way.

Here is an example of an action creator function that you will be using. This action creator will add an array of campsites to the Redux store. It has the required type property and it has another property called payload. We have to call the identifier for the type property – type. Payload is arbitrary we could call it something else. There is no limit to the number of properties you can have in an action. For this particular action the payload contains an array of campsites that’s received as a function parameter. Notice that this is an arrow function and we are only returning one thing, which is this object inside a parentheses, we don’t have to use the return keyword. Remember that with arrow functions, if you leave out the curly braces around the function body and there’s only one expression in the function, you don’t need to use the return keyword. It is implied. Now, you might be thinking, but wait there are curly braces. Well curly braces do a lot of different things in JavaScript and in this case these curly braces are being used to create an object. They are not the curly braces around the function body and that’s the reason that we have these parentheses around these curly braces, so that we don’t confuse the arrow function into thinking that these curly braces are for the function body, so even though you don’t see the return keyword here, be aware that this function is returning this object.

RECAP

For every action, you will create:

1. An action type defined as String constant
2. An action creator, a function that returns the action object and has a type property, plus any data (payload) to send to the store to update it

Then you will connect each action to a React component using the connect() function and a mapDispatchToProps argument.

Every time an action is dispatched, the Redux store will check all its reducers for a matching action type, then run the code for that action type, which will then update the state.

Reducers

Now we will discuss Reducers. Here is an example of one:

Reducers are considered to be part of the store. Now, while there are not multiple stores in Redux. There can be multiple reducers that handle different parts of the same state. By the time you reach the exercise  this simplified code is from , you will have done something called splitting the reducer, which creates different reducers to handle different parts of the state. So that the state that’s referenced in this reducer is just a section of the entire state object that this reducer is responsible for updating. Here this reducer takes it’s section of the existing state as it’s first argument.

If that state does not exist yet, then it’s using default function parameters here to initialize it to this object, which has the property campsites set to an empty array.

Then for its second parameter it takes the action object that was dispatched.

The it goes through this switch statement and if any of the action types in the switch cases match the action type  of the action object. It then creates the new state from the existing state updating it with the date from the action. Then it returns the new state to the store.

Please note, that it is not required for the reducer to use a switch statement, but it is the best way to do it. You could use if statements or other ways to check for the action type. The only thing that’s required of this reducer is that it return it’s section of the state. Again, the Redux principle is state is read only. You never mutate the existing state. You only replace it with a new state.

One of the ways you can create a new state from the existing state is by use of the spread syntax. It’s not the only way but it’s one that will often be used.

Here we are spreading out the property key value pairs from the existing state. Doing this does not mutate the existing state. We are basically making a copy of it’s properties,

then we add the payload from the action object into the campsite’s property, then we have this all surrounded in the curly braces that signify the creation of a new object. The object literal syntax. So remember from the lesson on the spread syntax, since this campsite’s property is second in order in the object literal definition, it will overwrite the campsite’s property that was spread from the existing state.

Then if none of the action types matched,  this default case will just return the existing state.

Let us go back to a concept mentioned before.

Splitting the Reducer

Last week we just had a single file reducer.js and it contained a single reducer function. That reducer is working with the entire state, which consists of four properties, campsites, comments, partners and promotions. These properties are all independent of each other and can be managed separately.

Often it will be useful to split up your reducer into multiple reducers and put them in separate files. However, Redux’s create store function will only accept a single reducer as an argument. So Redux also provides a function called combined reducers that will take all of your reducers and combine them into a single root reducer to use with create store and that’s what you will be doing in the next exercise! The after that, you will begin to implement Redux actions with action types and action creators.

 Exercise: Splitting and Combining Reducers

We will be doing in this exercise:

• Implement separate reducers that are responsible for only part of the state.
• Combine the reducers into a single root reducer to manage the entire state.

Create separate reducers:

campsites.js

import { CAMPSITES } from '../shared/campsites';

export const Campsites = (state = CAMPSITES, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

comments.js

import { COMMENTS } from '../shared/comments';

export const Comments = (state = COMMENTS, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

partners.js

import { PARTNERS } from '../shared/partners';

export const Partners = (state = PARTNERS, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

promotions.js

import { PROMOTIONS } from '../shared/promotions';

export const Promotions = (state = PROMOTIONS, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

The Redux createStore() function requires that all your reducers be combined into one single root reducer to be used as an argument to createStore(). You will use the combineReducers() function for this.

configureStore.js

import {createStore, combineReducers} from 'redux';
import { Campsites } from './campsites';
import { Comments } from './comments';
import { Partners } from './partners';
import { Promotions } from './promotions';

export const ConfigureStore = () => {
    const store = createStore(
        combineReducers({
            campsites: Campsites,
            comments: Comments,
            partners: Partners,
            promotions: Promotions
        })
    );

    return store;
};

Now we can safely delete the reducer.js file from the project, as it is no longer being used.

Exercise: Redux Actions

We will:

• Define Redux actions and implement an action creator.
• Dispatch an action from the action creator to update the state in the Redux store

ActionTypes.js

export const ADD_COMMENT = 'ADD_COMMENT'; ActionCreators.js

import * as ActionTypes from './ActionTypes';

export const addComment = (campsiteId, rating, author, text) => ({
    type: ActionTypes.ADD_COMMENT,
    payload: {
        campsiteId: campsiteId,
        rating: rating,
        author: author,
        text: text
    }
});

comments.js

import { COMMENTS } from '../shared/comments';
import * as ActionTypes from './ActionTypes';

export const Comments = (state = COMMENTS, action) => {
    switch (action.type) {
        case ActionTypes.ADD_COMMENT:
            const comment = action.payload;
            comment.id = state.length;
            comment.date = new Date().toISOString();
            return state.concat(comment);
        default:
            return state;
    }
};

MainComponent.js

CampsiteInfoComponent.js

Redux Middleware and Redux Thunk

Redux Middleware

In the previous lesson we saw how we can change a state in the Redux store by dispatching actions. At times, when an action is dispatched we may want to intercept that action before it reaches the reducer and either change it or cause some side effect to happen. Something other than changing the application state.

Redux Middleware – Intercepts an action before it reaches the reducer and allows you to change it or cause a side effect to happen, apart from updating the state – third party extension point.

For example, we might want to write a message to a log file or we might want to make a server request and wait for the server to respond. This is where Redux Middleware can help.

Redux Middleware provides the capability to run code after an action is dispatched and before it reaches the reducer. So middleware provides a point where you can inject third-party extensions that can respond to an action. One straightforward example is Redux logger.

Asynchronous Calls

Redux Middleware is also used to help you deal with asynchronous calls.

Synchronous code: Everything happens in order, app waits until a piece of code is finished before continuing

Asynchronous code: Start something, then continue with the program without waiting for it to finish, result is dealt with later

Common asynchronous call: Client requests data from server, must wait for a response before using data.

So how do we have an action request data from a server, then wait for and handle the server response? This is where Redux Middleware can help us!

The middleware can wrap around dispatch and insert operation before action reaches reducer: logging, making async calls, crash reporting, stopping an action, dispatching other actions, etc.

Middleware can be chained, so multiple middleware libraries can be used in sequence.

The way that you will insert Redux Middleware is via the applyMiddleware() function which is passed as a parameter to the createStore() function.

REDUX THUNK

Redux Thunk is one of the most useful redux middleware libraries.

“thunk“: a programming technique where you wrap a function inside another function to delay its execution until it is needed!

This technique is used in Redux Thunk to inject extra operations into an action creator. Action creators normally return an action (object).

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met or even to dispatch multiple actions.

So normally the way that Redux is set up, the action creator function is expected to return an object, which is sent directly to the reducer. Redux thunk enables you to use that action creator to delay stop or change that dispatch. This will hopefully make more sense once you are using it.

In our project we will use Redux Thunk to have an action creator function generate an asynchronous request to a server for data then dispatch a new action depending on the response to that request once it’s received.

Alternatives to Redux Thunk

Redux Thunk is the most common way to handle the setup of simple asynchronous logic in Redux action creators.

There are other ways such as: redux-saga, redux-observable

Exercise: Redux Thunk

Install Redux Thunk and Logger as shown below, with yarn add:

yarn add redux-thunk@2.3.0

yarn add redux-logger@3.0.6

configureStore.js (update it to use Thunk and Logger as follows)

ActionTypes.js

ActionCreators.js

campsites.js

import * as ActionTypes from './ActionTypes';

export const Campsites = (state = {
        isLoading: true,
        errMess: null,
        campsites: []
    }, action) => {
    switch (action.type) {
        case ActionTypes.ADD_CAMPSITES:
            return {...state, isLoading: false, errMess: null, campsites: action.payload};
        case ActionTypes.CAMPSITES_LOADING:
            return {...state, isLoading: true, errMess: null, campsites: []};
        case ActionTypes.CAMPSITES_FAILED:
            return {...state, isLoading: false, errMess: action.payload};
        default:
            return state;
    }
};

LoadingComponent.js

import React from 'react';

export const Loading = () => {
    return (
        <div className="col">
            <i className="fa fa-spinner fa-pulse fa-3x fa-fw text-primary" />
            <p>Loading...</p>
        </div>
    );
};

MainComponent.js

CampsiteInfoComponent.js

HomeComponent.js

DirectoryComponent.js

export const InitialFeedback = {
    firstName: '',
    lastName: '',
    phoneNum: '',
    email: '',
    agree: false,
    contactType: 'Pho
ne',
    feedback: ''
}; configureStore.js

MainComponent.js

Additional Resources:

• Redux – combineReducers
• Redux – Usage with React – Implementing container components (documentation on using mapDispatchToProps)
• MDN – Import – Import an entire module’s contents
• MDN – Object initializer – Shorthand property names
• Redux Middleware
• Redux FAQ – What async middleware should I use?
• Redux Thunk
• Eloquent JavaScript – Asynchronous Programming
• Fullstack Academy – Thunks in Redux: The Basics
• Redux-Logger
• Redux-Thunk
• Redux – applyMiddleware()
• Fullstack Academy – Thunks in Redux: The Basics
• DaveCeddia.com – What the heck is a ‘thunk’?
• React-Redux-Form
• React-Redux-Form – createForms
• React-Redux-Form – actions.reset
• React-Redux-Form – Form component