Implement Redux in React app

This article is giving step-by-step guide for implementation of redux in React app.

1. Create and Run brand new project of react by typing below sequence of commands in cmd/terminal

npx create-react-app react-redux-example
cd react-redux-example
npm start

2. Replace src/App.jsfile with below content

src/App.js

3. Now install reduxand react-redux( to connect React with Redux)

npm install redux --save
npm install react-redux --save

4. Create redux store to mange global level state at src/store/index.js

src/store/index.js

5. Create root reducer at src/reducers/index.js

src/reducers/index.js

6. Create actions constants at src/constants/action-types.js

src/constants/action-types.js

7. Make availability of store by putting in root level component. Here, in src/index.js replace with below content.

src/index.js

8. List component at src/components/ToDo/List.js with below content to list out the to do items.

src/components/ToDo/List.js

9. Create component at src/components/ToDo/Create.js with below content to create new to do item.

src/components/ToDo/Create.js

10. Done !!!