React Redux | Explained in 5 minutes | React Redux tutorial
React Redux
Redux Explained in 5 minutes
React Redux tutorial
React Redux tutorial for beginners
Redux Explained
Redux is a predictable state container for JavaScript apps.It helps you write applications that run in different environments (client, server, and native), and are easy to test.
You can use Redux together with React, or also called, React Redux. React Redux is tiny (2kB, including dependencies), but it has a large ecosystem of addons available.
Modern web applications are composed of multiple components that constantly produce and share data called states
But when states are decentralized, it can be so difficult to manage.
React Redux was created by Dan Abramov and Andrew Clark. Since mid-2016, the primary maintainers are Mark Erikson and Tim Dorr.
For redux to work correctly, the state must be immutable. Redux has a single, global object to store all shared application states.
When a button is clicked, an action will be dispatched. It has action's name and payload
The Redux flow is a one-way data flow that is predictable and testable. React Redux also give developers some perfect dev tools which allows you to travel through your application's data, but the boilerplate code seems quite complexity to understand, and quite difficult to a small project to get started.
A store is basically just a plain JavaScript object that allows components to share state. We define store.js, this file is created from configureStore function and some reducers. We will define reducers later.
A slice automatically generates action creators and action types that correspond to the reducers and state
Initial states are always not null, in this case, it is an array of products.
Reducers here are 2 functions: insert and delete object(product) in an array
we can destructure 2 actions from product slice's actions
Then export default reducers
In your real project, we have many more components, excepts App, these components can access store globally.
You should probably prefer to call the useDispatch hook in your components to retrieve a reference to dispatch function .
This button will dispatch an action using dispatch function
The Provider component makes the Redux store available to any nested components that need to access the Redux store.
Use React Debugger by pressing F12, you can see the Redux flow, from action to Reducer, then update State, reload UI
It is all about React Redux with a tiny example, it may helps you undertand quickly about Redux and Redux Devtools. If you like this video, please comment, subscribe and share for receiving more videos. Thank you all.
Support - https://www.paypal.me/sunlight4d
SUBSCRIBE TO MY CHANNEL FOR MORE INTERESTING VIDEOS:
/ nguyenduchoang
You can see code in github:
https://github.com/sunlight3d?tab=rep...
Twitter: / nguyend97601913
Facebook: / nguyen.duc.hoang.bk
