redux原理就是做一个全局的状态管理,然后通过上下文context传递,provide和connect就是这么做的。
使用react hooks中的useContext和useReducer就可以构建一个类似的全局状态管理了。
首先利用useReducer得到一个状态state和改变状态的dispatch
然后用useContext传递state和dispatch给组件。组件就可以获得state和dispatch方法了。
具体例子如下:
// Context.js
export const defaultState = {
value: 0
}
export function reducer(state, action) {
switch(action.type) {
case 'ADD_NUM':
return { ...state, value: state.value + 1 };
case 'REDUCE_NUM':
return { ...state, value: state.value - 1 };
default:
throw new Error();
}
}
import React, { useReducer, createContext } from 'react'
import { ChildFirst } from './ChildFirst'
import { ChildSecond } from './ChildSecond'
import { reducer, defaultState } from './reducer'
export const Context = createContext(null)
export function Content() {
const [state, dispatch] = useReducer(reducer, defaultState)
return (
<Context.Provider value={{state, dispatch: dispatch}}>
<ChildFirst/>
<ChildSecond/>
</Context.Provider>
)
}
// ChildFirst.js
import React, {useContext} from 'react'
import {Context} from './content'
export function ChildFirst() {
const AppContext = useContext(Context)
return (
<div>
<button onClick={
() => {
AppContext.dispatch({
type: "ADD_NUM",
payload: {}
})
}
}>addNum</button>
<button onClick={
() => {
AppContext.dispatch({
type: "REDUCE_NUM",
payload: {}
})
}
}>reduceNum</button>
</div>
)
}
// ChildSecond.js
import React, {useContext} from 'react'
import {Context} from './content'
export function ChildSecond() {
const AppContext = useContext(Context)
return (
<div>
{AppContext.state.value + 's'}
</div>
)
}