Redux 'a lo pobre'

LimaJS 23/08/2018

Transcript

1. Redux a lo pobre @lupomontero - LimaJS 23/08/2018
2. @lupomontero
3. Estado / State ...
4. Action reducer() Browser (DOM) render() Store getState() dispatch() subscribe() SignIn View View onEvent() onEvent() View View View subscribe() HOC (withStore) App Home View View reducer() dispatch() Action
5. Principios de Redux • Single source of truth. Everything that changes in the app (incl. data and UI state) is contained in a single immutable object called the “state” or the “state tree”. • State is read-only. The state tree is read-only. Anytime you want to change the state you dispatch an action describing what happened. • Changes are made with pure functions. To specify how the state tree is transformed by actions, you write pure reducers.
6. Store getState: retorna el estado actual dispatch: nos debe permitir despachar acciones y actualizar el estado a través de los reducers. subscribe: debe permitirnos suscribir funciones para que se invoquen cuando cambie el estado.
7. combineReducers export const combineReducers = reducers => (state, action) => Object.keys(reducers).reduce((memo, key) => ({ ...memo, [key]: reducers[key](memo[key], action), }), state || {});
8. compose export const compose = (...fns) => (...args) => fns.slice(0, -1).reverse().reduce( (memo, fn) => fn(memo), fns[fns.length - 1](...args), );
9. applyMiddleware export const applyMiddleware = (...middlewares) => createStore => (reducers, initialState, enhancer) => { const store = createStore(reducers, initialState, enhancer); return { ...store, dispatch: middlewares.slice().reverse().reduce( (dispatch, middleware) => middleware(store)(dispatch), store.dispatch, ), }; };