我如何使用 useReducer 将 js 与 firestore 反应？它总是 return 未定义

Question

我如何使用 useReducer react js 与 firestore？它总是 return 未定义

我正在尝试将 reducer 与 firebase 结合使用，但是如果我在 useEffect 中使用 dispatch，我将无法获取数组。

userType 工作正常。我做错了什么？

首次渲染app.js页面时，我想加载登录用户数据，用户数据

和firestore中的订单信息产品信息，放入状态，进行管理。

如果有更好的方法，请推荐。

const iState = {
  orders: [],
  userType: "before",
};
function reducer(state, action) {
  switch (action.type) {
    case "ORDERS":
      return { orders: [...state.orders, [action.order]] };
    case "CHANGE":
      return { userType: action.userType };
    default:
      return state;
  }
}
function Counter() {
  const [user, loading] = useAuthState(auth);
  const [state, dispatch] = useReducer(reducer, iState);
  const { orders, userType } = state;
  useEffect(() => {
    db.collection("accounts")
      .doc(user?.email)
      .get()
      .then(doc => dispatch({ type: "CHANGE", userType: doc?.data()?.type }));
    db.collection("orders")
      .doc("b2b")
      .collection("b2borders")
      .onSnapshot(snapshot =>
        dispatch({
          type: "ORDERS",
          order: snapshot.docs.map(doc => ({ id: doc.id, data: doc.data() })),
        })
      );
  }, [user, dispatch]);
  if (loading || userType === "before") {
    return (
      <div className="grid place-items-center h-screen w-full">
        <div className="text-center pb-24 flex flex-col justify-center items-center">
          <Spinner name="ball-spin-fade-loader" color="gray" fadeIn="none" />
        </div>
      </div>
    );
  }
  if (user && userType === "admin") {
    return (
      <div className="grid place-items-center h-screen w-full">
        {console.log(orders)}
      </div>
    );
  }
  return (
    <>
      <div className="grid place-items-center h-screen w-full">
        <div className="text-center pb-24 flex flex-col justify-center items-center">
          <Spinner name="ball-spin-fade-loader" color="gray" fadeIn="none" />
        </div>
      </div>
    </>
  );
}
export default Counter;

Answer 1

您没有正确编写减速器。 reducer 是一个纯函数，它将当前状态和分派的动作作为输入，returns 是新状态。因此，每当您 return 来自 reducer 的新状态对象时，它都会完全替换您当前的状态对象，而不是将您的新状态与当前状态合并。

因此，您必须将减速器更改为如下所示：

function reducer(state, action) {
  switch (action.type) {
    case "ORDERS":
      return {...state, orders: [...state.orders, {...action.order}] };
    case "CHANGE":
      return {...state, userType: action.userType };
    default:
      return state;
  }
}

我如何使用 useReducer 将 js 与 firestore 反应？它总是 return 未定义

how can i use useReducer react js with firestore? it always return undifined

reactjs

firebase

google-cloud-firestore

use-reducer