My quick note on Redux

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.

Ref:

• What the heck is a thunk?

• "why do we use middleware for async?"

• Redux with async logic

• React-redux immutability & side effects