006. REDUX FRAMEWORKPresenter: Binh Quan

ReactJS - Redux

❖ Why Redux❖ Store, Actions and Reducer❖ Redux Alternatives

ReactJS - Why Redux

❖ State management for whole system❖ One store / Multiple Reducers❖ Connecting React components❖ Dispatching events❖ Server rendering (you don’t need any special API to

manage)

ReactJS - without Redux

ReactJS - with Redux

ReactJS - without Redux vs with Redux

ReactJS - more about Redux

Read more: ★ https://css-tricks.com/learning-react-redux/★ https://blog.jumpcut.com/why-redux-why-now-32

b3f95b59b#.4drj7z90i

ReactJS - Redux terms

Terms in Redux❖ Application state

➢ State vs Stateless❖ Reducers❖ Store❖ Provider❖ Actions❖ Dispatch

ReactJS - Redux flow

Basic flow

❖ Application state

❖ Reducers❖ Store❖ Provider❖ Actions❖ Dispatch

ReactJS - Redux side effects with API middlewareSide effects

withAPI middleware❖ Application

state❖ Reducers❖ Store❖ Provider❖ Actions❖ Dispatch

ReactJS - Redux flow

More explanations: ★ https://github.com/reactjs/redux/issues/653

Reducers

The Reducer is function that takes the previous state and an action, processing previous state then return next state.

Note:

❖ Each reducer often contains initial state

❖ Next state is not that old state with modification. It’s completely a new object

New state (object) is

returned after

processing old state

Store

Store with single reducer

Store

Store with multiple reducers

Provider

Provider is top Component that used to connect Redux store and React Component

Actions

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Dispatch

Dispatch is the method of sending data from component to store for processing according to specific action.

Get application state

Bind dispatch to React Component

Now Demo