Types of actions in a Redux App

In the previous post there was a bunch of tests but not the code that make them pass. In the way we’re building apps with Redux, there are different kinds of actions and creators injected in the components. We usually talk just about actions without distinction. These are the various kinds:

• Redux action - a plain object: {type: ‘SOME_NAME’, data: someData}

• Redux action creator - a function returning an action:

    function actionCreator(){
        return {
            type: 'SOME_NAME',
            data: {some: 'data'}
        };
  

• Potential asynchronous action creators - supported by redux-thunk:

    function middlewarePoweredActionCreator(){
        return function(dispatch){
             return dispatch({
                    type: 'SOME_NAME',
                    data: {some: 'data'
             });
        };
    }
  

• Non-redux related actions:

    function nonReduxAction(fetch, data){
        return fetch(url, {
                    method: 'POST',
                    body: JSON.stringify(data)
                })
                .then((response) => {
                    return Promise.resolve(response.json());
                });
        });
    }
  

There are situations where the store’s state is not going to change, so there is no need for a reducer. If I just want to send some data to the server, I don’t need the Redux machinery. I just post data from the component to the server through my non-redux-related action. In the previous post about the factory I explained how to map actions to the component. Action creators connected to Redux must be dispatched whereas non-redux actions must not.

Asynchronous action creators are needed when data needs to be fetched from the server or sent to the server and passed through the reducers thus changing the store’s state.

Populating store with data from server:

Processing data and changing the state before sending it to the server:

Redux-thunk middleware provides two arguments to the function, dispatch and getState. The first one triggers the reducers process and the second gets the current state from the store.

Action creators are just functions, they can be easily tested in isolation although we usually test them in integration as described in previous posts.