It's a series of Redux. Hope you go through everything as Redux is not easy concept to understand if you are beginner and i am still beginner too but i have written this series to share my knowledge.
Why Redux?
I wrote the concept of Redux and why it has created by Redux team.
Introducing MVC architecture
MVC
MVC is a design pattern. The client sends the request to the controller > update the model according to the action > pass it to the view
When an action comes in, the controller receives and then update the data held by the model. After that, the changes are reflected in the view.
However, as the application gets bigger and bigger, its hard to figure out which model and view are intertwined.
The reason why we apply Flux over MVC?
Facebook had reported the cause of the alarm bug in the message app with two-way data flow. So to fix it, introduced Flux with one-way data flow.
What is Flux?
Flex is kind of abstract concept. To overcome MVC limitation, Facebook created an application architecture.
What is Redux?
It's a JS library that implement the flux architecture created by Facebook. A state management system for cross components or app-wide state.
Usage : Efficient data flow and state management between components
One thing to keep in mind
In order to update values immutably, your code must copy the existing objects as Redux expects that all state updates are immutably.
dispatch an action and that action trigger a reducer
Core redux concept
- Redux uses a "one-way data flow" app structure
When something happens in the app:
The UI dispatches an action.
The store runs the reducers, and the state is updated based on what occurred.
The store notifies the UI that the state has changed.
The UI re-renders based on the new state.
Redux Terms and Concepts
Action
An action is a plan JS object with type filed. It always has a type. The rest is payload.
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'buy milk' // additional info
}
Action creators
A function that creates and return an action object
Reducers
A reducer is a function that receives the current state and an action object. To decide how to update the state and return the new state:
function counterReducer(state = initialState, action) {// Check to see if the reducer cares about this actionif (action.type === 'counter/increment') {// If so, make a copy ofstatereturn {...state,// and update the copy with the new valuevalue: state.value + 1}}
store
The current Redux state lives in store. The store is created by passing in a reducer.
dispatch
The only way to update the state in redux store is call "store.dispatch()" and pass in an action object
store.dispatch({type: 'counter/increment'})
A example story
You are at Domino Pizza shop! Hmm yummy! Customers are about to order a pizza with different toppings. All teams from management, chef, front cashier are need to know about that order data. Those data is stored in a central repository so it can be updated easily.
{
Type : "ORDER_PIZZA",
payload : {
Name: "Marie",
Amount: "$30"
}
}
3 Action types : Put an order, Make a pizza or Cancel the order
Redux cycle(Pizza store)
Action Creator -> Action -> dispatch -> Reducers -> State
Customer order -> Pizza -> Machine -> Departments -> All order status data.
Redux Cycle
create a store
import { createStore } from "redux";
you can have only one store to manage the data.
- dispatch the action
Action is like what we want to do. Dispatch method send actions to the store.
Actions (objects) MUST have TYPE property - what kind of action.
Don't mutate the state - redux built on Immutability (copy)
store.dispatch({ type: "ADD_TODO", text: toDo }); - Handle a reducer & connect it
Update the new state. Reducer is like a function that used to update store and have 2 arguments which are (state, action).
state - old state/state before update
action - What happened/ what update
Here's what a simple Reducer looks like:
function reducer(state, action) {
//return new state
}
To handle several action cases, we typically use switch statement below. By using a switch statement, you can handle different action types within your Reducer.
- subscribe
store.subscribe(paintTodos);
You never mutate the state. but the only way to modify is to dispatch the action. Keep it mind that return new state objects, instead of mutating the previous state.
never do like state.push(action.text),
Do this by creating a new array
return […state, {text: action.text}]
The reason why we use filter() is that we should never ever mutate the array.
filter() method creates a new array with all elements.
React-redux
The folder structure
reducer, actionsand store
Using React-redux, it provides Provider & Connect().
/actions -> Contains files to related to action creators
/components -> Files related to components
/reducers -> Files related to reducers
/index.js -> set up both react and redux.
Reducer is a pure function that changes the state. Whenever dispatch() method run, state re-updated. To handle these several reducers, we use combineReducers() of Redux package.
To create a store, we use createStore() method. Store provide state down to child component() with Provider. subscribe() and dispatch() methods will be there to notice the changes.
const render = () => {
ReactDOM.render(
document.getElementById('root')
)
};
Redux toolkit
Getting Started | Redux Toolkit
The Redux Toolkit package is intended to be the standard way to write Redux logic.redux-toolkit.js.org
Redux Middleware
redux-saga & redux-thunk
It was the most difficult part to understand for me.
Redux with TypeScript
Usage with TypeScript | React Redux
React Redux itself is currently written in plain JavaScript. However, it works well with static type systems such as…react-redux.js.org
Frequently asked questions
The differences between Context API and Redux
- Why Redux over React Context API?
Although they have similar purpose, React Context has some potential disadvantages like complex setup with bunch of nested JSX Code and performance. One of Redux team members said its still not ready for all Flux-like state propagation(change frequently). React context is not optimized for high-frequency state changes. React-Redux uses the Context api, so you always are using both together. Redux is for state management, Context is for propagating values down the render tree. Not the same thing.
Conclusion
I highly recommend you to watch this to summary everything
Reference
Redux Fundamentals, Part 2: Concepts and Data Flow | Redux
In Part 1: Redux Overview, we talked about what Redux is, why you might want to use it, and listed the other Redux…redux.js.org
Understanding Redux: The World's Easiest Guide to Beginning Redux
This is a comprehensive (but simplified) guide for absolute Redux beginners, or any who wants to re-evaluate their…www.freecodecamp.org
Please subscribe my channel
iDevBrandon
Welcome to my vlog! I am Brandon. I'd share my life journey how i grow up as a developer & investorwww.youtube.com