When developing applications we have a hard time managing application state, and that is okay because managing application state is hard. We will try to make it easier using Redux. Redux is predictable state management container for JavaScript applications that helps us manage our state while also making our state mutations predictable. Through the presentation and code, I will show you how I solved my state problem with Redux in React application.

1. REACT STATE MANAGEMENT
WITH REDUX

4. Vedran Blaženka
Front-End Developer at Enterwell.
JavaScript, React, Redux, CSS Modules,
PostCSS, Elm...

5. enterwell.net/careers/

6. STATE MANAGEMENT IS HARD

7. Tracking server responses
Cached data
Tracking local data
UI state, Show/hide spinner, active
route...
server-side rendering, fetching data
before performing route transitions
etc...

8. React
Communication between components

9. PREDICTABLE STATE CONTAINER

10. Predictable
Make state mutations predictable by putting
restrictions on how and when updates can
happen.
(actions, reducers)

12. Redux's Three Principles

13. Single source of truth
The of your whole application is stored in an
object tree within a single .
state
store

14. State is read-only
The only way to change the state is to emit an ,
an object describing what have or should happened.
action

15. Changes are made with
pure functions
To specify how the state tree is transformed by actions,
you write pure .reducers

16. Data Flow
strict unidirectional data flow

18. Actions
{
type: 'ADD_TODO',
payload: {
text: 'Build my first Redux app'
}
}
https://github.com/acdlite/flux-standard-action
1. Something has (or should) happen
2. Don't specify how

19. Action Creator
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: {
text
}
}
}
store.dispatch(addTodo('Write blog post'));

20. Reducer
(previousState, action) => newState
Pure function that takes the previous state,
and an action and returns the new state.

22. function todoReducer(state = [], action) {
switch(action.type) {
case 'ADD_TODO':
return [ ...state, action.payload ];
case default:
return state;
}
}
export default todoReducer;
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: {
text
}
}
}
store.dispatch(addTodo('Write blog post'));

23. Things you should never do inside a reducer:
Mutate its arguments;
Perform side effects like API calls and routing
transitions;
Call non-pure functions, e.g. Date.now() or
Math.random().

24. Just a calculation!
Immutability
No surprises. No side effects. No API
calls. No mutations.

25. Store
getState()
dispatch(action)
subscribe(listener)
replaceReducer(nextReducer)

26. State vs. Store
Do whatever is less awkward. - Adam Abramov
http://redux.js.org/docs/faq/OrganizingState.
html#organizing-state-only-redux-state

27. Marc was almost ready to implement
his "hello world" React/Redux app

29. TO BE, OR NOT TO BE
(to redux, or not)

30. Pros:
Total separation of data and UI
Server-side rendering
Developer Experience (DevTools, Time Travel, Logging)
Growing ecosystem
Easy error reporting integration with other services
(Sentry)
Strinct unidirectional data flow
Redux API - 99 lines of code

31. Cons:
Community conventions are still developing
"Feels bloated, too much boilerplate code..."
¯_( )_/¯ (shrug emoji)

32. http://redux.js.org/
https://egghead.io/courses/getting-started-
with-redux
https://facebook.github.io/immutable-js/
https://github.com/reactjs/react-redux
https://github.com/gaearon/redux-thunk
Resources (za one koji žele znati više) :

33. Hvala na pažnji!
Vedran Blaženka
@vblazenka
blazenka.vedran@gmail.com