![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'));](https://image.slidesharecdn.com/react-state-managmenet-with-redux-161128194828/85/React-state-managmenet-with-Redux-22-320.jpg)
React state managmenet with Redux
- 1. REACT STATE MANAGEMENT WITH REDUX
- 4. Vedran Blaženka Front-End Developer at Enterwell. JavaScript, React, Redux, CSS Modules, PostCSS, Elm...
- 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...
- 10. Predictable Make state mutations predictable by putting restrictions on how and when updates can happen. (actions, reducers)
- 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.
- 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)
- 33. Hvala na pažnji! Vedran Blaženka @vblazenka blazenka.vedran@gmail.com