眾所周知
Redux是React的狀態(tài)管理，但是操作太過繁瑣镜粤，自從Hooks問世之后抬虽，我們大可以使用新ApiuseReduce來進行狀態(tài)管理夏伊。
定義我們初始狀態(tài)
let defaultData = {city:'武漢',id:0}//初始化倉庫數(shù)據(jù)
新建一個Reduce函數(shù)
//Redux for Hooks
const reducer = (state, action) => {
switch (action.type) {
case 'city':
return {...state,city:state.city==='武漢'?'杭州':'武漢'};
case 'id':
return {...state,id:state.id+1};
default:
throw new Error();
}
}
兩者關(guān)聯(lián)起來
const [state, dispatch] = useReducer(reducer, defaultData);
下面的步驟為實際開發(fā)中便于管理 可不這樣寫
定義映射函數(shù)
//useReducer 映射函數(shù)
const mapDispatch = dispatch => ({
city: () => dispatch({ type: 'city'}),
id: () => dispatch({ type:'id' }),
})
配發(fā)器注入到映射函數(shù)
const actions = mapDispatch(dispatch)
這樣抹沪，如果我們想讓城市發(fā)生改變
<Button
onClick={actions.city}>
獲取{state.city==='武漢'?'杭州':'武漢'}的天氣??
</Button>
就結(jié)束了
想讓id自增
<Button
onClick={actions.id}>ID自增+
</Button>
是不是方便多了
如果我們想城市一發(fā)生改變后去拿改變后城市的天氣情況?? 我們需要使用useEffect
//檢測city發(fā)生改變
useEffect(() => {
setLoading2(true)
const getWeather = async ()=>{
const result =
await axios(`https://api.xiaohuwei.cn/weather.php?city=${state.city}`)
setWeather(result.data)
setTimeout(() => {
setLoading2(false);
message.success(`${state.city}天氣更新成功`);
}, 1500);
}
getWeather();
}, [state.city])
可以看到 useEffect 第二個參數(shù)這里寫的是 [state.city] 就是代表這個函數(shù)監(jiān)聽的就是城市改變?nèi)缓髨?zhí)行相應(yīng)的邏輯刻肄。如果你想要監(jiān)聽id的變化，那就只需要再申明一個 useEffect 即可融欧，聰明的你肯定會知道第二個參數(shù)為 [state.id]敏弃。
最后附上完整代碼 Reactproject
看一下Demo？ Demo
