ali*_*007 5 reactjs use-reducer
我只是想知道是否可以使用 useReducer,因为我在 UseEffect fetched data => State => useReducer(..., State) 中使用它
const [initialData, setInitialData] = useState({ name: 'ass' });
const [data, dispatch] = useReducer(apiReducer, initialData);
const Data2 = useFetch('/qaz')
useEffect(() => {
setInitialData(Data2)
}, [Data2])
useEffect(() => {
dispatch({ type: 'Different', payload: 'key' })
}, [initialData])
export function apiReducer(state, action) {
switch (action.type) {
case 'Different':
return { ...state, key: action.payload };
default:
return state
}
}
Run Code Online (Sandbox Code Playgroud)
创建减速器后,您无法更改初始状态。你能做的就是用dispatch一个动作来替换整个状态。在钩子返回其数据后,您可以使用该操作的useEffect钩子。dispatch"REPLACE_STATE"useFetch
减速器
export function apiReducer(state, action) {
switch (action.type) {
case "REPLACE_STATE":
return action.playload;
case "Different":
return { ...state, key: action.payload };
default:
return state;
}
}
Run Code Online (Sandbox Code Playgroud)
成分
export default function App() {
const [state, dispatch] = useReducer(apiReducer, { name: "ass" });
const fetchedData = useFetch("/qaz");
useEffect(() => {
if (fetchedData) {
dispatch({ type: "REPLACE_STATE", payload: fetchedData });
}
}, [fetchedData]);
const doSomething = () => {
dispatch({ type: "Different", payload: "key" });
};
...
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3614 次 |
| 最近记录: |