This document introduces Redux, a state management library for JavaScript apps. It discusses why state management is needed, other approaches like Flux and MobX, and how Redux addresses these issues using principles of single source of truth, immutable state updates via pure functions, and unidirectional data flow. Key aspects of Redux like actions, action creators, reducers, and connecting React components to the store are explained. Considerations for when Redux is a good fit and potential gotchas are also covered.

1. Introduction to Redux
Kate Kilian || Full-stack JS Engineer

2. Background
&
Theory
What’s the need for Redux,
and why is it a useful solution?

3. First: State Management

4. The problem:
How should one manage client-side state?
Types of state to manage:
● Data-driven
● Communication-driven
● Controls (forms, per-view)
● Session
React’s out-of-the-box
setState()
doesn’t work well
for ALL state types

5. Other attempts to “solve” state-management
Flux:
Stores emit events; components must handle their
own listening/updating.
MobX:
Provides stores, uses observables to get updates; has
less boilerplate via decorators.
“Pub-Sub”:
Any component can publish an event and/or
subscribe; all publishing and subscribing is managed by each
component.

6. What types of apps does Redux work for?
… where there’s state to manage!
● Single-page web applications (SPAs)
● Desktop apps via Electron
● React Native apps

7. Principles behind Redux’s architecture choices
Single Source of Truth via Unidirectional Data Flow
=> all actions are consolidated by reducer
=> reducer handles changes to Redux state
=> predictable logic across app
=> data normalization (decreases likelihood of multiple copies of data)
State is “Read Only” using Immutability
=> reducer returns a new state - no callbacks modifying state in place
State is modified using Pure Functions
=> same inputs, predictable output

8. Major benefits of Redux
Immutability enables new functionality:
● Timeline and time travel
○ Data goldmine!
○ Debugging with Redux
Devtools/Logging
○ Better understanding of your app
○ Can send bug report
○ Hook into analytics
● Easier testing due to “pure functions”
● Enables clean diff-ing for
component update
Connect():
● abstracts event listener logic
● Component receives data for specific
parts of store
Dispatch():
● Calls reducer with
the action passed to dispatch
● Used under the covers in
mapDispatchToProps

9. Takeaway:
In larger apps with more complexity,
constraints help the app FLOURISH!

10. Project Setup How to begin using Redux
in your app

11. … npm install is your friend
React projects
npm install redux
npm install react-redux
Other JS projects
Angular:
Ng-redux
ng2-redux
Vue.js:
Vue-redux
Vuedux

12. Redux Demo
● Store
● Provider
● connect()
● dispatch()
● Action creators
● Actions
● Reducers
All the parts and how to use them

13. Gotchas
What to watch out for
● Don’t mutate state in place
● Flatten state tree using normalizr

14. Thanks for
listening!
… and stay in touch
Demo App & Resources
https://github.com/katekilian/
react-redux-mini-bookreader
Kate Kilian
Twitter: @thequirkyquail
Github: https://github.com/katekilian
LinkedIn: http://linkedin.com/in/katekilian

15. … and when SHOULDN’T you use Redux?
Static sites, where there’s no state to manage
Situations where a view’s/component’s internal state
doesn’t need to be broadcast to other components
If you don’t agree with the philosophies
and want more control with less “ceremony”