This is an introduction to Redux.

1. Chathuranga Jayanath Warnasuriya
hello@chathuranga.org

2. Redux, pronounced "re-DUCKS," would be a great
name for a vintage clothing store — it means
something that's brought back or revived.
https://www.vocabulary.com/dictionary/redux

3. What is Redux
• Its predictable
• Predecessor of flux
• Platform / Framework independent
• Hot Reload
“it provides a great developer experience, such as live code editing combined with a
time traveling debugger”
~Redux Documentation~

7. Three Principles
• Single source of truth
• State is read-only
• Changes are made with pure functions

8. Why Redux?
• One way data flow
• State is immutable
• Easy to test
• Works well with vanilla JS, JQuery, Angular, Ember, React
• Its Functional Programing

9. Installation
• $ git clone https://github.com/wahengchang/react-redux-boilerplate-example
• $ npm install
• $ npm run dev
• open http://localhost:3000/
https://github.com/coryhouse/pluralsight-redux-starter

10. Main Stakeholders
• Action
• Reducer
• Provider
• Store

11. Action
https://code-cartoons.com/a-cartoon-intro-to-redux-
3afb775501a6
action = { type: String, ...payload: any }
Holds action payloads in plain javascript objects. Must have a type property
that
indicates the performed action, typically be defined as string constants. All
other
properties are the action's payload.
https://egghead.io/

12. Reducer
https://code-cartoons.com/a-cartoon-intro-to-redux-
3afb775501a6
function reducer( State , Action ) ⇒ State
Takes the previous state and an action,
and returns the next state.
https://egghead.io/

13. Store
https://code-cartoons.com/a-cartoon-intro-to-redux-
3afb775501a6
Brings together your application's state
• Allows access to state via getState();
• Allows state to be updated via dispatch(action);
• Registers listeners via subscribe(listener);
• Handles unregistering of listeners via the function returned by
subscribe(listener).
store = { ... }
https://egghead.io/

14. Basic Flow
http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/

15. Demo

16. • React Hey CourseAction, someone clicked this “Save Course” button.
• Action Thanks React! I will dispatch an action so reducers that care can update state.
• Reducer Ah, thanks action. I see you passed me the current state and the action to
perform. I’ll make a new copy of the state and return it.
• Store Thanks for updating the state reducer. I’ll make sure that all connected components
are aware.
• React-ReduxWoah, thanks for the new data Mr. Store. I’ll now intelligently determine if I
should tell React about this change so that it only has to bother with updating the UI when
necessary.
• ReactOoo! Shiny new data has been passed down via props from the store! I’ll update the
UI to reflect this!
https://app.pluralsight.com/library/courses/react-redux-react-router-es6/

17. Q&A

18. Good to know
• Babel
• Webpack
• ES6
• React
• Functional Programing

19. ThankYou