實現(xiàn)redux
頂層
- createContext創(chuàng)建共享的上下文
- useReducer使用類同redux
import React, {createContext, useContext, useReducer} from 'react';
const _STATE = createContext();
const _DISPATCH = createContext();
function App (){
const initStatus = {
count: 0
};
const reducer = (state, action) => {
switch (action.type) {
case 'add':
return {
...state, count: state.count + 1
};
case 'reduce':
return {
...state, count: state.count - 1
};
default:
throw 'Error';
}
}
const [state, dispatch] = useReducer(reducer, initStatus); //傳入一個reducer函數(shù)和初始值
return <React.Fragment>
<_STATE.Provider value={state}>
<_DISPATCH.Provider value={dispatch}>
<Child />
</_DISPATCH.Provider>
</_STATE.Provider>
</React.Fragment>
}
......
需要使用狀態(tài)的function
......
const creator = (type, payload, error) => {
return {
type: type,
payload,
error
}
}
function Child(){
const state = useContext(_STATE); //獲取共享的上下文
const dispatch = useContext(_DISPATCH);
return <React.Fragment>
<div>{state.count}</div>
<button onClick = {() => dispatch(creator("add"))}>增加</button>
<button onClick = {() => dispatch(creator("reduce"))}>減少</button>
</React.Fragment>
}
......
順帶提一下useEffect
useEffect(() => {
//do something
}, []);
//因為hooks函數(shù)每一次的render產(chǎn)生的函數(shù)和變量都是不一樣的绞吁，所以當(dāng)useEffect依賴某個變量時需要在第二個參數(shù)傳入
