表单提交的 React-Redux 问题（服务器错误 500）

Question

我正在处理一个 CRUD MERN 应用程序，目前我正在尝试提交一个表单。表单本身运行良好，但 Redux 方面存在问题。我认为我的操作或减速器可能需要进行一些更改才能使其正常工作，但我不确定问题出在哪里。

这里是 CreateForm 组件：

// import jsonPlaceholder from "../apis/jsonPlaceholder";
import { useState } from "react";
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { addPost } from '../actions';

const CreateForm = () => {
    const dispatch = useDispatch();
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const [author, setAuthor] = useState('');
    const history = useHistory();

    const handleSubmit = (e) => {
        e.preventDefault();
        const post = { title, body, author };
        console.log('click', post) //I get the post object here
        dispatch(addPost(post)) 
        history.push('/');
}

    return ( 
        <div className="create">
            <h2>Add a new blog</h2>
            <form onSubmit={handleSubmit}>
                <label>Blog title:</label>
                <input
                    type="text"
                    required 
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    />
                <label>Blog body:</label>
                <textarea
                    required
                    value={body}
                    onChange={(e) => setBody(e.target.value)}
                ></textarea>
                <label>Author:</label>
                <input
                    type="text"
                    required
                    value={author}
                    onChange={(e) => setAuthor(e.target.value)}
                    />
                <button>Save</button>
            </form>
        </div>
    );
}
 
export default CreateForm;

下面是动作：

export const addPost = (post) => async dispatch => {
    await jsonPlaceholder.post('/posts/add');
    dispatch({
        type: ADD_POST,
        payload: post
    })
}

这里是减速器

import { ADD_POST, DELETE_POST } from '../actions/types';

const postReducer = (state = [], action) => {
    switch (action.type) {
        case ADD_POST:
            return state.concat([action.data]);
        case DELETE_POST:
            return state.filter((post)=>post.id !== action.id);
        default:
            return state
    }
}

export default postReducer;

我得到：未捕获（承诺）错误：请求失败，状态码为 500

Answer 1

我解决了问题，它在行动中。

export const addPost = (post) => async dispatch => {
    const res = await jsonPlaceholder.post('/posts/add', post);
    dispatch({
        type: ADD_POST,
        payload: res.data
    })
}