试图使用redux-thunk，但它显示错误，尽管我觉得一切都很好

Question

所以我正在学习一个实现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>
)
}

我真的看不出这里的问题，如果有人能启发我，我会很感激的！谢谢！！：(

Answer 1

createStore方法中有两个错误。

1. createStore的第一个参数是归根，这是很好的。但第二个参数应该是初始状态，并且您正在传递applyMiddleware而不是初始状态
2. 您必须为applyMiddleware方法提供一组中间件

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

Answer 2

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