Using React and Redux

1. 006. REDUX FRAMEWORK
Presenter: Binh Quan

2. ReactJS - Redux
❖ Why Redux
❖ Store, Actions and Reducer
❖ Redux Alternatives

3. 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)

4. ReactJS - without Redux

5. ReactJS - with Redux

6. ReactJS - without Redux vs with Redux

7. ReactJS - more about Redux
Read more:
★ https://css-tricks.com/learning-react-redux/
★ https://blog.jumpcut.com/why-redux-why-now-
32b3f95b59b#.4drj7z90i

8. ReactJS - Redux terms
Terms in Redux
❖ Application state
➢ State vs Stateless
❖ Reducers
❖ Store
❖ Provider
❖ Actions
❖ Dispatch

9. ReactJS - Redux flow
Basic flow
❖ Application state
❖ Reducers
❖ Store
❖ Provider
❖ Actions
❖ Dispatch

10. ReactJS - Redux side effects with API
middleware
Side effects
with
API middleware
❖ Application state
❖ Reducers
❖ Store
❖ Provider
❖ Actions
❖ Dispatch

11. ReactJS - Redux flow
More explanations:
★ https://github.com/reactjs/redux/issues/653

12. 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

13. Store
Store with single reducer

14. Store
Store with multiple reducers

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

16. 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().

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

18. Get application
state

19. Bind dispatch to
React Component

20. Now Demo