Workshop presentations, code as you speak. Make them inspired with awe.
- Redux Store box (most simple redux model (subscribe, dispatch))
- Reducer as function (ternary, if, switch)
- Action as object and Action creator
- UI simple rendering function (adder, list -> AJAX list)
- Rules of redux reducers as pure functions, immutability, non-async nature
- Combine reducer manually -> show purpose
- Middleware async actions
- Unsubscribe for Gods sake!
- Intro, make short introduction by presenting simplest redux-system model (state object, dispatch, subscribe) and data flow using follow-up visuals. [2m]
- Increment reducer + store creation, Begin with blank file. We live-code simplest reducer + 1 action (-> action creator). Presentation in browser console. [3m]
- Add UI, Create simple UI (counter and + button) to support state presentation and action dispatch. UI should mimic React component, so we render UI programmatically. [5m]
- More actions, enable +,- and 0 actions, extend reducer ( ?:, if, {[key]}} ) and UI [5m]
- More reducers + Following UI, reducer -> {list of strings}, UI -> {input and list presentation} (replace previous reducer temporary) [7m]
- Working together combine reducers manually -> use combineReducers [5m]
- Three principals present (3 principals of redux)[https://redux.js.org/understanding/thinking-in-redux/three-principles]
- Middleware TBD
** Resources
- Visuals
- Simplified Redux model (dispatch, subscribe box)
- Redux-data-flow-paint
- Redux one-way dataflow
- Redux async dataflow
- Middleware dataflow
- state
- action
- reducer
- pure function
- immutability
- middleware
- thunk
- selector
- memorized selector
(...arg) => res
res -> (F, arg)