The document discusses Redux as a state management tool for React applications, highlighting its principles such as a single source of truth, read-only state, and unidirectional data flow. It outlines the role of actions, reducers, and the importance of immutability in managing state effectively without side effects. Additionally, the pros and cons of using Redux are briefly noted, along with resources for further learning.

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