Implementing Redux based store with Chakra UI application

Redux is a Predictable State Container for JavaScripts Applications.

• Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
• Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
• The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.
• Redux works with any UI layer, and has a large ecosystem of addons to fit your needs.

This hands-on tutorial is designed for the front-end developers who have Chakra UI or CoreUI based frontend and would like to add redux support to your enterprise ready frontend application. The same concept will work with other JavaScript based framework also.

In this tutorial you will learn the following:

1. Adding required package to package.json
2. Add store backend using store.js at the src-root (src/store.js).
3. Add store and action based middleware into middleware.js at same path where store.js
4. Add support for actions in agents.js at the src-root (src/agents.js)
5. Now add implement all the reducer specific code for each component and combiner all reducers :
   • src/state/actions/index.js
   • src/state/reducers/homeReducers.js (Component specific implementation)
   • src/state/reducers/index.js (combine all reducer implementations
6. Add payload helper.js for dto.payload
7. Implement redux support to component specific container code
8. In the component implementation code access redux based API and access state data
9. Update App.js to support Redux Provider and connect with state store. Provider[store={store}] = AppRouter

Video Timeline:

(00:00) Video Start (00:07) Content intro (01:52) Redux Data Flow (03:44) Code walkthrough at GitHub (starter and full code) (07:10) Starting exercise from base Chakra UI code, ready with routes (08:00) Opening code in Visual Studio Code IDE (09:33) Adding react-redux modules into package.json (11:04) Add store backend using store.js (12:41) Adding agents (src/agents.js) (14:08) Implement component reducer code and combine all reducers (16:23) Add payload helper.js for dto.payload (18:37) Add redux support to component specific container (26:16) Implement component with Redux store (28.27) Update app.js with Redux store Provider (29:26) Add store and action based middleware (32.23) Start Testing code with Redux (34.47) Update backend API code (36:16) Recap all steps (40:08) Pushing all code to GitHub (41:48) Credits

Instructions URL: https://github.com/prodramp/publiccode/tree/master/chakra-ui-tutorials/redux-states

Workshop Source code: https://github.com/prodramp/publiccode/tree/master/chakra-ui-tutorials/redux-states

GitHub Repo: URL: https://github.com/prodramp/publiccode Note: Please clone the repo and visit specific folder to get the full source code.

Chakra UI: https://chakra-ui.com/docs/getting-started

Please visit: https://prodramp.com @prodramp https://www.linkedin.com/company/prodramp

Content Creator: Avkash Chauhan (@avkashchauhan) https://www.linkedin.com/in/avkashchauhan

Tags: #webdevelopment, #frontend #react #chakraui #fullstack #uidevelopment #uicomponents #layout #header #footer #floatingpanel #sidebar #menubar #redux #statemanager #react-redux #JavaScript ... https://www.youtube.com/watch?v=9IwA6E8crTo