A Redux minimum working example

When beginners start learning Redux, they find it difficult to understand how the different components in a Redux application communicate and what purpose they serve. I created a minimum working example with React and Redux, but before I provide you the github link at the end of the article to clone it, I would like to give you some background on how the different parts work in this simple application.

In general, in order to understand how a redux app works, we should ask our selves what does Redux expect from us. It expects:

1. Default state. This can be an empty array, a text — something to start with in the application.
2. Reducers. Reducers are the units of functionality that are going to return the new copy of the state. They should be always immutable.
3. Actions. Actions are the functions that hold the type of action that should be fired and the payload of information that we are sending to the reducer.
4. A store. Finally Redux expects a store where it is going to store all the state of the application. In the community is well known as the ‘single source of truth'.

I did not mention the container components in React, as Redux is a state management tool for Javascript applications, not only for React applications.

The minimum working example

The file structure of the working example consists of the src directory and src works as a root directory for the other folders in the app.

In the src directory there is a directory called actionCreators. In the actionCreators are the actions that return the action type— in this case ‘INCREMENT'.

In the src directory there is a directory called data. This is the folder that holds the default state of the application. The default state at this case has some text and a counter property initialised to 0.

In the src directory there is a directory called reducers. In the person.js, the new copy of the object is returned with the counter property increased by 1. This happens when the ‘INCREMENT' action type is the case is the switch statement. Otherwise, the default state is returned. Also in the reducers directory there is a file called rootReducer.js. In this file, the person and employer reducer are combined with the combineReducers() method, and they form one reducer that is going to be passed in the store.js.

In the src directory there is a file called store.js and it is the file that holds that whole state of the application. It is created by a method called createStore(), taking as parameters the root reducer and the default state. The current default state is imported along with the root reducer. Then with the appropriate use of createStore(), the store is created.

In the src directory, there is a directory called components. In the components directory presentational component is created in the App.js. It gets the name of the person and the value of the counter from the store and it creates the handler for the increment of the counter.

In the src directory, there is a file called index.js. In the index.js the Provider from react-redux is imported and it is going to put the app into the scope of the store. It is also going to make it possible for us to use the connect() method (see next paragraph) to make the component listening to the changes of the store. Provider takes one property, the store and it needs to be the parent element of the Main.js, which is the container component.

In the src directory, there is a directory called containers. In the containers there is a a file called Main.js. The main objective of the container, is to use the appropriate bindings to listen to the changes from the store and to map the props to the presentational component. This is achieved via 3 methods:

1. mapStateToProps(state): This method makes the component to subscribe to the store's updates and mapStateToProps is called whenever there is a change in the store.
2. mapDispatchToProps(dispatch): Gets the actions and makes them accessible for calling in the presentational component. This is achieved by either returning bindActionCreators with the actions and dispatch as parameters, or by just returning an object with the action names.
3. connect(mapStateToProps, mapDispatchToProps): Composes the above two functions together and it binds all the store updates to the presentational component.

Find the minimum working example here

I hope that this article made the least amount of sense on how a redux application integrated in React should work. Please leave your comment below with your feedback. Happy coding.