A Redux minimum working example
Tags: javascript
Published: 2017-02-25 09:34:13

---
title: A Redux minimum working example
published: true
description: 
cover_image: 
tags: Javascript
---

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. <b>Default state</b>. This can be an empty array, a text — something to start with in the application.
2. <b>Reducers</b>. Reducers are the units of functionality that are going to return the new copy of the state. They should be always immutable.
3. <b>Actions</b>. 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. <b>A store</b>. 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.

<b>The minimum working example</b>

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 <b>src</b> directory there is a directory called <b>actionCreators</b>. In the actionCreators are the actions that return the action type— in this case <b>‘INCREMENT'</b>.

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

In the <b>src</b> directory there is a directory called <b>reducers</b>. In the person.js, the <b>new copy</b> 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. <b>Otherwise, the default state is returned</b>. Also in the reducers directory there is a file called <b>rootReducer.js</b>. In this file, the person and employer reducer are combined with the <b>combineReducers()</b> method, and they form one reducer that is going to be passed in the store.js.

In the <b>src</b> directory there is a file called <b>store.js</b> and it is the file that holds that whole state of the application. It is created by a method called <b>createStore()</b>, 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 <b>src</b> directory, there is a directory called <b>components</b>. In the components directory presentational component is created in the <b>App.js</b>. 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 <b>src</b> directory, there is a file called <b>index.js</b>. 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 <b>one property, the store</b> and it needs to be the parent element of the Main.js, which is the container component.

In the <b>src</b> directory, there is a directory called <b>containers</b>. 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. <b>mapStateToProps</b>(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. <b>mapDispatchToProps</b>(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. <b>connect</b>(mapStateToProps, mapDispatchToProps): Composes the above two functions together and it binds all the store updates to the presentational component.

Find the minimum working example <a href="https://github.com/SteliosVoskos/redux-boilerplate">here</a>

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.