动作必须简单 objects。使用自定义中间件进行异步操作。 react-redux

Question

我是 reac-redux 的新手，我正在尝试从 Firestore 收集数据，但现在当 firebase returns 数据时，我尝试通过 redux-observable 将信息映射到存储空间报错"Actions must be plain objects. Use custom middleware for async actions."我猜肯定是关于epic配置的，那我留代码

Epic

import { getFirestore } from "redux-firestore";
import {
  GET_DOCUMENTS,
  GET_COLLECTIONS_BY_DOCUMENT,
  setStatus,
  getDocumentsSuccess,
  getDocumentsFailed
} from "../actions/dataActions";
import { switchMap } from "rxjs/operators";
import { ofType } from "redux-observable";
import { concat, of } from "rxjs";

export default function dataEpics(action$) {
  const getFS = getFirestore();
  return action$.pipe(
    ofType(GET_DOCUMENTS, GET_COLLECTIONS_BY_DOCUMENT),
    switchMap(action => {
      if (action.type === GET_DOCUMENTS) {
        return concat(
          of(setStatus("pending")),
          getFS
            .collection("en")
            .get()
            .then(querySnapshot => {
              let listDocumentIds = [];
              querySnapshot.forEach(doc => {
                listDocumentIds.push(doc.id);
                getDocumentsSuccess(listDocumentIds);
              });
            })
            .catch(err => of(getDocumentsFailed(err)))
        );
      }
    })
  );
}

Action

export const SET_STATUS = "SET_STATUS";
export const GET_DOCUMENTS = "GET_DOCUMENTS";
export const GET_DOCUMENTS_SUCCESS = "GET_COLLECTIONS_SUCCESS";
export const GET_DOCUMENTS_FAILED = "GET_COLLECTIONS_FAILED";

export function setStatus(status) {
  return {
    type: SET_STATUS,
    payload: status
  };
}

export function getDocumentsSuccess(documents) {
  return {
    type: GET_DOCUMENTS_SUCCESS,
    payload: documents
  };
}

reducer

import {
  GET_DOCUMENTS_SUCCESS,
  GET_DOCUMENTS_FAILED,
  SET_STATUS
} from "../actions/dataActions";

const initState = {
  status: "idle", // "idle" | "logout" | "pending" | "login" | "success" | "failure";
  documents: [],
  collections: []
};

const dataReducers = (state = initState, action) => {
  switch (action.type) {
case SET_STATUS: {
      return {
        ...state,
        status: action.payload
      };
    }
    case GET_DOCUMENTS_SUCCESS: {
      return {
        ...state,
        status: "success",
        documents: action.payload
      };
    }
  default:
      return state;
  }
};

export default dataReducers;

我认为错误在史诗中，我有更多类似方式的代码

谢谢你的帮助。

Answer 1

我找到了解决方案，错误在史诗中，我试图在 querySnapshot 中调用操作，这是不可能的，然后我将 getDocumentsSuccess 移到

getFS
.collection(action.payload.language + "_" + "MachinesAndEquipment")
.get()
.then(querySnapshot => {
let listDocumentIds = [];
querySnapshot.forEach(doc => {
     listDocumentIds.push(doc.id);
});  
 getDocumentsSuccess(listDocumentIds);

动作必须简单 objects。使用自定义中间件进行异步操作。 react-redux

Actions must be plain objects. Use custom middleware for async actions. react-redux

reactjs

redux-observable

google-cloud-firestore