Front-End developer, passionate about quality code, software ethics and TDD
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:
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:
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.