使用 useEffect 更新 useReducer 'state'

Question

在我的应用程序中，我使用React Hooks/Context API。现在，每当我的Provider组件挂载时，我都需要将从localStorage获取的数据分配给initialState.carts/state.carts。如果useEffect支持返回对象，这是可能的。但是在useEffect中返回对象是不可能的！

现在我该如何解决这个问题？

代码在下面，

const initialState = {
books: books,
carts: []
};
export const Context = createContext(initialState);
export const Provider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
if (localStorage.getItem("carts") !== null) {
const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
//Here I want to assign 'fetchedCarts' array items in 'state.carts' or 'initialState.carts'
}
});

Answer 1

您必须调度一个操作来更新state变量。

if (localStorage.getItem("carts") !== null) {
const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
dispatch({ type: 'UPDATE', payload: fetchedCarts })
}

因此，您必须将此操作类型添加到您已经在此处使用的减速器开关中：

const [state, dispatch] = useReducer(reducer, initialState);

减速器结构示例：

const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE':
return { ...state, ...action.payload }
break
default:
return state
}
}

我认为useEffect()应该有一个依赖数组(因为state的更新将以当前形式重新触发它(。

如果useEffect支持返回对象，这是可能的。但是在useEffect中返回对象是不可能的！

useEffect的响应应该是一个函数(在卸载组件之前调用该函数(-在此处返回对象是错误的。