Redux is a state management library that helps us to solve the problem of state usage from many places in app and passing props to a deep nesting component.
Redux ensures 3 pillars in its pattern: 1-way binding data & single source of truth & immutability;
Everything in Redux is communication with actions. Action is an object that describe what to do and return the new state from reducer
Actions Creator is a function returning a specific action object => prevents wrong typing when typing action objects again and again.
Reducer: A pure function takes in the current state object and a callback function which defines logic and returns new states; the idea of reducer comes from Array.reduce method.
Redux toolkit: compact action creators, reducer, and selectors into a slice - opinionated architecture.
We can create multiple stores in redux but it will violate the single source of truth.
thunk: a middleware that listens to dispatched events and sees if the arguments passed is a function or not. If it's a function then it will be executed (asynchronously)
> Redux with normal action:
UI dispatch ---> Actions ---> Reducer receive action and return new state;
> Redux with thunk (passing a function to dispatch instead of object):
UI dispatch ---> thunk ---> middleware executes thunk ---> dispatch action to reducer ---> reducer returns new state.
> Redux with thunk (passing a function to dispatch instead of object):
UI dispatch ---> thunk ---> middleware executes thunk ---> dispatch action to reducer ---> reducer returns new state.
Top comments (0)