Redux
Let's talk about
Store
Let's talk about
Store Methods
-
getState()
-
dispatch(action)
-
subscribe(listener)
-
replaceReducer(nextReducer)
Reducer
Let's talk about
(state, action) => newState
state
↓
action
↓
array.reduce(
function(accumulator, currentValue, currentIndex, self),
initialValue
)function* changes() {
/* yield user interactions and other effects */
}
changes().reduce(
function(state, action) { /* compute the next state */ },
initialState
)let reducer = (state, action) => state + action;
let arr = [4, 8, 15, 16, 23, 42];
// plain js
let sum = arr.reduce(reducer);
// Redux
let store = createStore(reducer);
arr.forEach(store.dispatch);
let sum = store.getState();Reducer honour code
- No mutations allowed
- No side effects
- Plain json-like objects
React
Let's talk about
Vanilla React
Lifecycle Methods
HOCs
Hooks
prop drilling chains
state everywhere
fat components
getderivedstatefromprops
shouldcomponentupdate
many renders
withState
withEffect
withPain
withMemo
console.log debugging
React with Redux
-
combineReducers
-
createStore
-
<Provider store={store}><App /></Provider>
-
mapStateToProps
-
mapDispatchToProps
-
connect
just do these simple steps
Real Redux Benefits
- testable
- fixable
- readable*
- true MVC
Side effects
Let's talk about
redux-thunk
-
async operations (futures)
redux-saga
-
any kind of side effects
-
high-level operators
function* fetchUser(action) {
try {
const user = yield call(Api.fetchUser, action.payload.userId);
yield put({type: "USER_FETCH_SUCCEEDED", user: user});
} catch (e) {
yield put({type: "USER_FETCH_FAILED", message: e.message});
}
}
function* mySaga() {
yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}HOOKS
Let's talk about
