Create React Redux Boilerplate code

Create React app using create-react-app command to create react boilerplate and install following dependencies using following command

$ npm install redux  react-redux  redux-devtools-extension  redux-thunk axios

Hope everyone knows what is react, at least basics. Then what is redux ?

Redux is an open-source JavaScript library for managing application state.

Why redux with react ?

React can manage its component state without need of external library tool. It works well for applications with few components but as the application grows managing states and sharing data among components become difficult. Using redux the states can be stored at one place called store where all the components can access the store to get state of any component.

How does it work ?

Fig: Redux flow diagram ,image courtesy: hackernoon (this image is used only for educational purpose)

You can create a react-redux app by using npm i react-redux-boilerplate-code command or you can clone from GitHub using git clone https://github.com/NikilMunireddy/react-redux-boilerplate-code.git command. You also follow the below steps to create your own boilerplate.

Follow the below steps to create your own boilerplate code to fetch data from API and display on page

Step 1: Create actions folder inside /src also create types.js inside actions file which stores all the types constants. Create type string constants inside types.js to get posts called GET_POSTS (or any name of your wish) and GET_POSTS_ERROR(if any error occurs during fetch).

Step 2: Create store.js outside src folder (along with App.js file). 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. The store maintains global app data. This can be accessed by any component irrespective of hierarchy.

Step 3: Create a action file posts.js inside actions folder. In this file we are going to write logic to fetch posts from API endpoint using axios. You can also use fetch api.

Step 4: Create another folder reducers create a file called posts.js. This reducer accepts the data from action and updates the state in store with new state.

Step 5: Create index.js inside reducers folder. This file is responsible to combine all reducers. All the reducer functions must be passed into combineReducers()

Step 6: All components should be wrapped inside <Provider/> tag and store should be passed as parameter. All the components wrapped inside <Provider/>can access store.

Step 7: Create a components folder inside src folder. Create a Posts.js component file. In this component we are calling the getPosts action and also accessing posts state from the store.

The methods and objects required are mentioned in propTypes and then the props are mapped to state.

This is a basic code to fetch the posts and store them in store and then access the store data and rendering it on view. This store state can also be accessed by any other component.

Redux has its benefits and doesn't mean it should be added in every application. Some lite applications work well without redux. The major benefit if redux is the state management becomes simple when components are interdependent on each other.