006. react - redux framework
Post on 20-Mar-2017
49 Views
Preview:
TRANSCRIPT
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
top related