React state managmenet with Redux

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) :

Hvala na pažnji!

Vedran Blaženka

@vblazenka

blazenka.vedran@gmail.com