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/publiccod...
Workshop Source code:
https://github.com/prodramp/publiccod...
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-st...
Please visit:
https://prodramp.com
@prodramp
/ prodramp
Content Creator:
Avkash Chauhan (@avkashchauhan)
/ avkashchauhan
Tags:
#webdevelopment, #frontend #react #chakraui #fullstack #uidevelopment #uicomponents #layout #header #footer #floatingpanel #sidebar #menubar #redux #statemanager #react-redux #JavaScript
