redux 如何将动作作为普通对象发送?

pu82cl6c  于 2023-01-13  发布在  其他
关注(0)|答案(1)|浏览(103)

向mongodb数据库发出删除请求并获得错误消息操作必须是普通对象。但如果我刷新存储对象将被删除。但我想实时执行。我已使用相同的方法实现获取编辑和创建请求,但使用删除时不会发生。我做错了什么。import React from“react”;
错误消息:错误代码:278操作必须是普通对象。实际类型为:您可能需要在存储设置中添加中间件来处理其他值的分派,例如“redux-thunk”来处理分派函数。
我正在将post.js按钮组件中的操作发送为onClick={()=〉dispatch(deletePost(post._id))}

const Post = ({ post, setCurrentId }) => {
     const classes = useStyles();
     const dispatch = useDispatch();
   
     const editHandeler = () => {
       setCurrentId(post._id);
     };
   
     return (
       <Card className={classes.card}>
         <CardMedia
           className={classes.media}
           image={
             post.selectedFile ||
             "https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"
           }
           title={post.title}
         />
         <div className={classes.overlay}>
           <Typography variant="h6">{post.creator}</Typography>
           <Typography variant="body2">
             {moment(post.createdAt).fromNow()}
           </Typography>
         </div>
         <div className={classes.overlay2}>
           <Button style={{ color: "white" }} size="small" onClick={editHandeler}>
             <MoreHorizIcon fontSize="default" />
           </Button>
         </div>
         <div className={classes.details}>
           <Typography variant="body2" color="textSecondary" component="h2">
             {post.tags.map((tag) => `#${tag} `)}
           </Typography>
         </div>
         <Typography
           className={classes.title}
           gutterBottom
           variant="h5"
           component="h2"
         >
           {post.title}
         </Typography>
         <CardContent>
           <Typography variant="body2" color="textSecondary" component="p">
             {post.message}
           </Typography>
         </CardContent>

         <CardActions className={classes.cardActions}>
           <Button size="small" color="primary" onClick={() => {}}>
             <ThumbUpAltIcon fontSize="small" /> Like {post.likeCount}{" "}
           </Button>
           <Button
             size="small"
             color="primary"
             onClick={() => dispatch(deletePost(post._id))}
           >
             <DeleteIcon fontSize="small" /> Delete
           </Button>
         </CardActions>
       </Card>
     );
   };
   
   export default Post;

删除位置功能

export const deletePost = (id) => async (dispatch) => {
  try {
    await api.deletePost(id);

    dispatch({ type: DELETE, payload: id });
  } catch (error) {
    console.log(error.message);
  }
};

API

const url = "http://localhost:5000/posts";

export const fetchPosts = () => axios.get(url);
export const createPost = (newPost) => axios.post(url, newPost);
export const updatePost = (id, updatedPost) =>
  axios.patch(`${url}/${id}`, updatedPost);

export const deletePost = (id) => axios.delete(`${url}/${id}`);

还原剂

import { FETCH_ALL, CREATE, UPDATE, DELETE, LIKE } from "../actions/constants";

const reducer = (posts = [], action) => {
  switch (action.type) {
    case FETCH_ALL:
      return action.payload;
    case CREATE:
      return [...posts, action.payload];
    case UPDATE:
      return posts.map((post) =>
        post._id === action.payload._id ? action.payload : post
      );
    case DELETE:
      return posts.filter((post) => post.id !== action.payload);

    default:
      return posts;
  }
};

export default reducer;

贮藏

import { configureStore } from "@reduxjs/toolkit";
import { reducers } from "./rootreducer";
import { applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";

const store = configureStore(
  { reducer: reducers },
  compose(applyMiddleware(thunk))
);

export default store;

根诱导剂

export const reducers = combineReducers({
posts: posts,
});
a7qyws3x

a7qyws3x1#

configureStore API的使用不正确。@reduxjs/toolkit中的configureStore API仅接受单个配置对象参数。
默认情况下,configureStore会自动添加一些中间件到Redux存储设置中,默认情况下会添加redux-thunk,所以不需要使用applyMiddleware再次添加。
我建议你沿着tutorials#quick-start走。

相关问题