动作必须是普通对象。相反，实际类型是：''。您可能需要将中间件添加到您的商店设置中以处理调度其他值

Question

我一直在我的 redux 代码中遇到这个错误。

以下是代码片段

Store.js

import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk  from 'redux-thunk'
import { persistStore } from "redux-persist";
import createSagaMiddleware from "@redux-saga/core";

import rootReducer from "./root-reducer";
import { fetchCollectionsStart } from "./user/user-sagas";
import rootSaga from './root-saga';

const sagaMiddleware = createSagaMiddleware();

const middelewares = [sagaMiddleware, logger];

export const store = createStore(rootReducer, applyMiddleware(...middelewares));

sagaMiddleware.run(rootSaga);

export const persistor = persistStore(store);

Root-reducer.js

import { combineReducers } from "redux";

import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import UserReducer from "./user/user-reducer";
import CartReducer from "./cart/cart-reducers";
import ErrorReducer from "./errors/error-reducer";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["cart", "user"],
  blacklist: ["error"],
};

const rootReducer = combineReducers({
  user: UserReducer,
  cart: CartReducer,
  error: ErrorReducer,
});

export default persistReducer(persistConfig, rootReducer);

Root-sagas.js

import { call, all } from "redux-saga/effects";

import { fetchCollectionsStart, loginUserStart, updateFoodStartes } from "./user/user-sagas";

export default function* rootSaga() {
  yield all([call(fetchCollectionsStart), call(loginUserStart), call(updateFoodStartes)]);
}

User-saga.js

export function* updateFoodAsync(data) {
  const pd = data.payload;
  console.log(pd)
  try {
    let updatedfoodItems = yield call(
      axios.post,
      "http://localhost:5050/updateFood",
      {
        _id: pd._id,
        type: pd.type,
        name: pd.name,
        imageUrl: pd.imageUrl,
        price: pd.price,
        description: pd.description,
      }
    );
    yield put(updateFoodStart(updatedfoodItems.result))
  } catch (error) {
    console.log(error);
  }
}

export function* updateFoodStartes() {
  console.log("hii there")
  yield takeLatest(UserActionTypes.Set_Update_Food, updateFoodAsync);
}

Modal.js

import * as React from "react";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import { TextField, TextareaAutosize } from "@mui/material";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { updateFoodStartes } from "../../redux/user/user-sagas";
import { connect } from "react-redux";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  p: 4,
};

const CommonModals = (props) => {
  const [textFieldData, setTextFieldData] = React.useState();
  //   const id = props.id || null;
  const typeData = React.useRef();
  const nameData = React.useRef();
  const priceData = React.useRef();
  const descData = React.useRef();
  const imageURLData = React.useRef();
  const { foodState, updateFoodStarts } = props;

  let arr = {};
  const saveChangesHandler = async (e) => {
    const datas = descData.current.value;
    arr._id = foodState._id;
    arr.type = typeData.current.value;
    arr.name = nameData.current.value;
    arr.price = priceData.current.value;
    arr.imageUrl = imageURLData.current.value;
    arr.description = descData.current.value;
    console.log(arr);
    updateFoodStarts(arr);

    props.handleClose();
  };

  
  var first;
  if (foodState) {
    first = (
      <>
        <Modal
          open={props.open}
          onClose={props.handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Type
            </Typography>
            <TextField
              id="outlined-basic"
              label="Outlined"
              variant="outlined"
              defaultValue={foodState.type || "Krish"}
              inputRef={typeData}
            />
            <br />
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Name
            </Typography>
            <TextField
              id="outlined-basic"
              label="Outlined"
              variant="outlined"
              defaultValue={foodState.name}
              inputRef={nameData}
            />
            <br />
            <Typography id="modal-modal-title" variant="h6" component="h2">
              ImageUrl
            </Typography>
            <TextField
              id="outlined-basic"
              label="Outlined"
              variant="outlined"
              defaultValue={foodState.imageUrl}
              inputRef={imageURLData}
            />
            <br />
            <Typography id="modal-modal-title" variant="h6" component="h2">
              Price
            </Typography>
            <TextField
              id="outlined-basic"
              label="Outlined"
              variant="outlined"
              defaultValue={foodState.price}
              inputRef={priceData}
            />
            <br />
            <Typography id="modal-modal-title" variant="h6" component="h2">
              description
            </Typography>
            <TextareaAutosize
              id="outlined-basic"
              label="Outlined"
              variant="outlined"
              defaultValue={foodState.description}
              ref={descData}
            />
            <br />
            <br />
            <Button
              variant="contained"
              style={{ marginRight: "20px" }}
              onClick={saveChangesHandler}
            >
              Save changes
            </Button>
            <Button
              color="error"
              variant="outlined"
              onClick={props.handleClose}
            >
              Cancel
            </Button>
          </Box>
        </Modal>
      </>
    );
  } else {
    first = <h2>Hello</h2>;
  }

  return first;
};

const mapDispatchToProps = (dispatch) => ({
  updateFoodStarts: (data) => dispatch(updateFoodStartes(data))
})

export default connect(null, mapDispatchToProps)(CommonModals);

User-actions.js

export const updateFoodStart = (data) => ({
  type: UserActionTypes.Set_Update_Food,
  payload: data
})

User-reducer.js

import { UserActionTypes } from "./user-types";
import { updatedFoodUtil } from "./user-utils";

const INITIAL_STATE = {
  foodData: null
}

const UserReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
      case UserActionTypes.Set_Update_Food:
        return{
          ...state,
          foodData: updatedFoodUtil(state.foodData, action.payload)
        }
    default:
      return state;
  }
};

export default UserReducer;

用户类型.js

export const UserActionTypes = {
  Set_Update_Food: "Set_Update_Food"
};

我已经更改了模态函数中的参数，但没有用。我也传递了没有参数的函数，但它仍然是一样的。

谢谢你的帮助。