尝试使用 redux-thunk，但它显示错误，即使对我来说一切都很好

Posted 2023-02-22

【中文标题】尝试使用 redux-thunk，但它显示错误，即使对我来说一切都很好

【英文标题】：Trying to use redux-thunk, but it displays error even though everything seems fine to me

【发布时间】：2021-08-31 07:43:38

【问题描述】：

所以我正在关注一个实现 redux-thunk 的教程，并按照视频中的内容完成了所有操作，但我仍然收到此错误：

错误：动作必须是普通对象。相反，实际的类型是：'Promise'。您可能需要将中间件添加到您的商店设置中以处理调度其他值，例如“redux-thunk”来处理调度函数。

代码如下所示：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  createStore, applyMiddleware, compose  from 'redux';
import thunk from 'redux-thunk';
    
import reducers from './reducers';
    
import App from './App';
    
const store = createStore(reducers, applyMiddleware(thunk));
    
ReactDOM.render(
    <Provider store=store>
        <App />
    </Provider>, 
    document.getElementById('root')
);

下面是动作

actions/posts.js

export const createPost = (post) => async (dispatch) => 
    try 
        const  data  = await api.createPost(post);

        dispatch( type: 'CREATE', payload: data );
     catch (error) 
        console.log(error);
    

减速器：

const reducer = (posts = [], action) => 
    switch (action.type) 
        case 'FETCH_ALL':
            return action.payload;
        case 'CREATE':
            return [ ...posts, action.payload];
        default:
            return posts;
    


export default reducer;

以及发生错误的文件：

import React,  useState  from 'react';
import  TextField, Button, Typography, Paper  from '@material-ui/core';
import FileBase from 'react-file-base64';
import  useDispatch  from 'react-redux';

import useStyles from './styles';
import  createPost  from '../../api';

export default function Form() 
    const [postData, setPostData] = useState(
        creator: '', 
        title: '', 
        message: '', 
        tags: '', 
        selectedFile: ''
    );
    const classes = useStyles();
    const dispatch = useDispatch();

    const handleSubmit = (e) => 
        e.preventDefault();

        dispatch(createPost(postData));
    

    const clear = () => 

    

    return (
        <Paper className=classes.paper>
            <form autoComplete="off" noValidate className=`$classes.root $classes.form` onSubmit=handleSubmit>
            <Typography variant="h6">Creating a Memory</Typography>
            <TextField 
                name="creator"
                variant="outlined"
                label="Creator"
                fullWidth
                value=postData.creator
                onChange=(e) => setPostData( ...postData, creator: e.target.value )
            />
            <TextField 
                name="title"
                variant="outlined"
                label="Title"
                fullWidth
                value=postData.title
                onChange=(e) => setPostData( ...postData, title: e.target.value )
            />
            <TextField 
                name="message"
                variant="outlined"
                label="Message"
                fullWidth
                value=postData.message
                onChange=(e) => setPostData( ...postData, message: e.target.value )
            />
            <TextField 
                name="tags"
                variant="outlined"
                label="Tags"
                fullWidth
                value=postData.tags
                onChange=(e) => setPostData( ...postData, tags: e.target.value )
            />
            <div className=classes.fileInput>
                <FileBase 
                    type="file"
                    multiple=false
                    onDone=(base64) => setPostData( ...postData, selectedFile: base64 )
                />
            </div>
            <Button className=classes.buttonSubmit variant="contained" color="primary" size="large" type="submit" fullWidth>Submit</Button>
            <Button variant="contained" color="secondary" size="small" onClick=clear fullWidth>Clear</Button>
            </form>
        </Paper>
    )

我真的看不出这里的问题，如果有人能启发我，我会很高兴！谢谢！！:)

【问题讨论】：

您的./reducers 文件是什么？你用过 combineReducer 吗？

是的，它是这样的：import combineReducers from "redux"; import posts from './posts'; export default combineReducers( posts );

可以分享代码api.createPost(post)

这一切对我来说似乎都是正确的。您的应用程序使用热重载吗？您是否尝试杀死 npm start 并重新启动它？

@TasosBu 我已经阅读了那个问题，但是我的代码看起来像被接受的答案，所以我不知道问题是什么

【参考方案1】：

感谢所有回答问题的人！原来我导入了错误的 createPost 函数，我真傻！幸运的是，现在一切似乎都正常了！

【参考方案2】：

你的createStore方法有两个错误。

createStore 的第一个参数是root reducer，这很好。 但第二个参数应该是初始状态，你正在传递 applyMiddleware 而不是初始状态 你必须给applyMiddleware方法提供一个中间件数组

// do like this
const store = createStore(reducers, , applyMiddleware([thunk]));

// not like this
const store = createStore(reducers, applyMiddleware(thunk));

【讨论】：

两种方法都试过了，还是不行：/不过还是谢谢你的回答！