Notice: React Hooks is RFC. This article is experimental
1. use combineReducers with useReducer
We can create nested reducer in redux combineReducer and I try to combine nested reducer and useReducer hook.
import { combineReducers } from "redux"
const counter = (state = 0, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1
case "DECREMENT":
return state - 1
}
return state
}
const inputValue = (state = "foo", action) => {
switch (action.type) {
case "UPDATE_VALUE":
return action.value
}
return state
}
export const rootReducer = combineReducers({
counter,
// nest
someNested: combineReducers({
inputValue
})
})
And create components
import React, { useReducer } from "react"
const App = () => {
const [state, dispatch] = useReducer(rootReducer, undefined, {
type: "DUMMY_INIT"
})
return (
<div className="App">
<div>
<h1>counter</h1>
<div>count: {state.counter}</div>
<button onClick={(e) => dispatch({ type: "INCREMENT" })}>+</button>
<button onClick={(e) => dispatch({ type: "DECREMENT" })}>-</button>
</div>
<div>
<h1>Input value</h1>
<div>value: {state.someNested.inputValue}</div>
<input
value={state.someNested.inputValue}
onChange={(e) =>
dispatch({
type: "UPDATE_VALUE",
value: e.target.value
})
}
/>
</div>
</div>
)
}
I can got good result when pass dummy initialState(=undefined) and any dummy action.
const [state, dispatch] = useReducer(rootReducer, undefined, {
type: "DUMMY_INIT"
})
2: Create Provider with createContext and useContext
We can avoid passing props with context.
https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down
const ReducerContext = createContext()
// Wrap Context.Provider
const Provider = ({ children }) => {
const [state, dispatch] = useReducer(rootReducer, undefined, {
type: "DUMMY_INIT"
})
return (
<ReducerContext.Provider value={{ state, dispatch }}>
{children}
</ReducerContext.Provider>
)
}
const App = () => {
return (
<Provider>
<div className="App">
<Counter />
<InputValue />
</div>
</Provider>
)
}
For consumer, we can use useContext
const Counter = () => {
const { state, dispatch } = useContext(ReducerContext)
return (
<div>
<h1>counter</h1>
<div>count: {state.counter}</div>
<button onClick={(e) => dispatch({ type: "INCREMENT" })}>+</button>
<button onClick={(e) => dispatch({ type: "DECREMENT" })}>-</button>
</div>
)
}
const InputValue = () => {
const { state, dispatch } = useContext(ReducerContext)
return (
<div>
<h1>Input value</h1>
<div>value: {state.someNested.inputValue}</div>
<input
value={state.someNested.inputValue}
onChange={(e) =>
dispatch({
type: "UPDATE_VALUE",
value: e.target.value
})
}
/>
</div>
)
}
If you want use <Consumer>, like this.
const Counter = () => {
return (
<ReducerContext.Consumer>
{({ state, dispatch }) => {
return (
<div>
<h1>counter</h1>
<div>count: {state.counter}</div>
<button onClick={(e) => dispatch({ type: "INCREMENT" })}>+</button>
<button onClick={(e) => dispatch({ type: "DECREMENT" })}>-</button>
</div>
)
}}
</ReducerContext.Consumer>
)
}
3. Emulate bindActionCreactors with useCallback
If we want bind action, we can use useCallback
const increment = useCallback((e) => dispatch({ type: "INCREMENT" }), [
dispatch
])
const decrement = useCallback((e) => dispatch({ type: "DECREMENT" }), [
dispatch
])
const updateValue = useCallback(
(e) =>
dispatch({
type: "UPDATE_VALUE",
value: e.target.value
}),
[dispatch]
)
return <div>
:
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
:
</div>
4. Emulate mapStateToProps and reselect with useMemo
const InputValue = () => {
const { state, dispatch } = useContext(ReducerContext)
// memolized. revoke if change state.someNested.inputValue
const inputValue = useMemo(() => state.someNested.inputValue, [
state.someNested.inputValue
])
return (
<div>
<h1>Input foo</h1>
<div>foo: {inputValue}</div>
<input
value={inputValue}
onChange={(e) =>
dispatch({
type: "UPDATE_VALUE",
value: e.target.value
})
}
/>
</div>
)
}
5. Emulate Container
const useCounterContext = () => {
const { state, dispatch } = useContext(ReducerContext)
const counter = useMemo(() => state.counter, [state.counter])
const increment = useCallback(
(e) => setTimeout(() => dispatch({ type: "INCREMENT" }), 500),
[dispatch]
)
const decrement = useCallback((e) => dispatch({ type: "DECREMENT" }), [
dispatch
])
return { counter, increment, decrement }
}
const Counter = () => {
const { counter, increment, decrement } = useCounterContext()
return (
<div>
<h1>counter</h1>
<div>count: {counter}</div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
)
}
//
const useInputContainer = () => {
const { state, dispatch } = useContext(ReducerContext)
// memolized action dispatcher
const updateValue = useCallback(
(e) =>
dispatch({
type: "UPDATE_VALUE",
value: e.target.value
}),
[dispatch]
)
// memolized value
const inputValue = useMemo(() => state.someNested.inputValue, [
state.someNested.inputValue
])
return {
updateValue, inputValue
}
}
const InputValue = () => {
const { updateValue, inputValue } = useInputContainer()
return (
<div>
<h1>Input foo</h1>
<div>value: {inputValue}</div>
<input value={inputValue} onChange={updateValue} />
</div>
)
}
Example code
https://stackblitz.com/edit/github-hgrund?file=src/App.js
Extra: middleware
Extra-1: Async fetch
We can emulate middleware with useEffect,But this may not recommended and we wait for Suspence
Reducer
const fetchedData = (state = {}, action) => {
switch (action.type) {
case "FETCH_DATA":
return action.value
}
return state
}
We create async function return random value.
const fetchData = (dispatch) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ random: Math.random() })
}, 100)
})
// Really:
// return fetch("./async.json")
// .then((res) => res.json())
// .then((data) => {
// return data
// })
}
Container:
We want pass useEffect to empty array([]).
https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
const useFetchDataContainer = () => {
const { state, dispatch } = useContext(ReducerContext)
// call on mount only
useEffect(() => {
fetchData().then((data) => {
dispatch({
type: "FETCH_DATA",
value: data
})
})
}, [])
const reload = useCallback(() => {
fetchData().then((data) => {
dispatch({ type: "FETCH_DATA", value: data })
})
})
const data = useMemo(
() => {
return JSON.stringify(state.fetchedData, null, 2)
},
[state.fetchedData]
)
return { data, reload }
}
const FetchData = () => {
const { data, reload } = useFetchDataContainer()
return (
<div>
<h1>Fetch Data</h1>
<pre>
<code>{data}</code>
</pre>
<button onClick={reload}>Reload</button>
</div>
)
}
Extra-2: Emulate custom middleware (like applyMiddleware)
If we need reducer middleware, we can wrap reducer dispatch
// my custom middleware
const myMiddleware = (state, dispatch) => {
return (action) => {
if (action.type == "OOPS") { // fire action when `OOPS` action.
dispatch({ type: "SET_COUNT", value: state.counter + 100 })
}
}
}
const useEnhancedReducer = (reducer, enhancer) => {
const [state, baseDispatch] = useReducer(reducer, undefined, {
type: "DUMMY_INIT"
})
const next = useMemo(() => enhancer(state, baseDispatch), [
state,
baseDispatch
])
// wrapped dispatch
const dispatch = useCallback((action) => {
baseDispatch(action)
next(action)
})
return { state, dispatch }
}
const Provider = ({ children }) => {
const { state, dispatch } = useEnhancedReducer(rootReducer, myMiddleware)
const value = { state, dispatch }
return (
<ReducerContext.Provider value={value}>{children}</ReducerContext.Provider>
)
}
Top comments (2)
for the emulating reselect
how to avoid re rendering every time the state is changed only when the particular slice of the state is changed?
Oh, I did not know about that behavior.I will try to find out about it.