Redux was created less than a year ago for a talk at React conference. It wasn't meant to be a Flux implementation. Nevertheless, its simple and smart principles quickly made Redux the most popular library for Flux architecture. It's straightforward, leverages functional programming principles and is easy to test. In this talk, you will learn what Flux is, understand the core ideas behind Redux, and see why so many people are falling in love with it. React knowledge (and usage) is not required!

1. UNDERSTANDING
REDUX
Ilya Gelman

2. Ilya Gelman
- Organizer of AngularJS-IL & ReactJS-Israel
- Passionate about design and UX
Consultant @ 500Tech

3. WHAT’S WRONG?

4. User Interface

5. User Interface
Controller

6. User Interface
Controller
Model Model

7. User Interface
Controller
Model Model Model

8. User Interface
Controller
Model Model Model
Model

9. User Interface
Controller
Model Model Model Model
Model

10. User Interface
Controller
Model
Library
Model Model Model
Model Model

11. User Interface
Controller
Model
LibraryLibrary
Model Model Model
Model Model Model Model

12. MVVC

14. NEW MINDSET

15. User Interface

16. User Interface
Dispatcher

17. User Interface
Dispatcher
Stores
UNI-DIRECTIONAL DATA FLOW
StoresStores

18. UI IS RENDERED

19. UI IS RENDERED
SOMETHING HAPPENED

20. UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED
UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED
UI IS RENDERED
SOMETHING HAPPENED
STATE CHANGED
UI RENDERED

21. FLUX

22. KEEP IT SIMPLE

23. Application state is…
ONE
SINGLE
PLAIN
JAVASCRIPT
OBJECT

24. Application state is…
READ-ONLY

25. PURE*
FUNCTION
Current State
Action
New State
* No side-effects
How to change the state

26. PURE*
FUNCTION
Current State
Action
New State
Reducer

27. PURE*
FUNCTION
Current State
Action
New State
const newState = reducer(previousState, action);
{ type: 'ACTION_TYPE', /*...*/ }

28. import { createStore } from 'redux';
const store = createStore(reducer, initialState);
Responsible for creating
a new state every time
The first state we pass
to the reducer

29. Store

30. getState() dispatch()
subscribe()
Store

31. function createStore(reducer, initialState) {
let state = initialState;
return {
dispatch(action) {
state = reducer(state, action);
},
getState() {
return state;
}
}
}
Basic Redux

32. REDUX ♥ VANILLA JS

33. REDUX

34. ONE MORE THING…

35. npm install --save react-redux

36. 1. Put the in context
import { render } from 'react-dom';
import { Provider } from 'react-redux';
render (
<Provider store={ store }>
<Root />
</Provider>,
document.getElementById('app')
);
Store

37. 2. Connect components to store
import { connect } from 'react-redux';
const ImageList = ({ images }) => (
<ul>
{
images.map((url, index) => (
<li key={ index }>{ url }</li>)
)
}
</ul>
);
const mapStateToProps = (state) => ({ images: state.images });
export default connect(mapStateToProps)(ImageList);

38. connect(
mapStateToProps,
mapDispatchToProps,
…
)
Maps part of the state
to component’s props
Maps dispatch functions
to component’s props

39. REDUX ♥ REACT

40. REDUX ♥ ANGULAR

41. REDUX ♥ JQUERY

42. REDUX ♥ BACKBONE

43. ♥ REDUX

44. QUESTIONS?

45. Read our blog:
http://blog.500tech.com
Ilya Gelman
ilya@500tech.com