Embed Size (px)
Citation preview
REACT STATE MANAGEMENTWITH REDUX
Vedran BlaženkaFront-End Developer at Enterwell.
JavaScript, React, Redux, CSS Modules,PostCSS, Elm...
enterwell.net/careers/
STATE MANAGEMENT IS HARD
Tracking server responsesCached dataTracking local dataUI state, Show/hide spinner, activeroute...server-side rendering, fetching databefore performing route transitionsetc...
ReactCommunication between components
PREDICTABLE STATE CONTAINER
Predictable
Make state mutations predictable by puttingrestrictions on how and when updates can
happen.
(actions, reducers)
Redux's Three Principles
Single source of truthThe of your whole application is stored in an
object tree within a single .
statestore
State is read-onlyThe only way to change the state is to emit an ,an object describing what have or should happened.
action
Changes are made withpure functions
To specify how the state tree is transformed by actions,you write pure .
reducers
Data Flowstrict unidirectional data flow
Actions{ type: 'ADD_TODO', payload: { text: 'Build my first Redux app' }}
https://github.com/acdlite/flux-standard-action
1. Something has (or should) happen2. Don't specify how
Action Creator
function addTodo(text) { return { type: 'ADD_TODO', payload: { text } }}
store.dispatch(addTodo('Write blog post'));
Reducer
(previousState, action) => newState
Pure function that takes the previous state,and an action and returns the new state.
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'));
Things you should never do inside a reducer:
Mutate its arguments;Perform side effects like API calls and routingtransitions;Call non-pure functions, e.g. Date.now() orMath.random().
Just a calculation!
Immutability
No surprises. No side effects. No APIcalls. No mutations.
StoregetState()dispatch(action)subscribe(listener)replaceReducer(nextReducer)
State vs. Store
Do whatever is less awkward. - Adam Abramov
http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-only-redux-state
Marc was almost ready to implementhis "hello world" React/Redux app
TO BE, OR NOT TO BE(to redux, or not)
Pros:Total separation of data and UIServer-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
Cons:Community conventions are still developing
"Feels bloated, too much boilerplate code..."¯\_( )_/¯ (shrug emoji)
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) :
