javascript - 为什么我不能调用动作来调度？

Question

我正在尝试在现成的社交网络中添加新功能，以便可以编辑已发布的帖子。但是当我从react 组件调用getPost和函数时，我没有结果——这些函数都不起作用，它的动作也不会调度。我错过了什么重要的手术？addPostEditedEditPost

React 组件在这里：

import React, { Fragment, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import { deletePost, getPost, addPostEdited } from '../../actions/post';

const EditPost = ({
    post: { _id, text, name, avatar, user, date }, match
}) => {
    useEffect(() => {
        getPost(match.params.id);
    }, [getPost]);

    const [newText, setText] = useState(text);

    return (
        <Fragment >
             <Link to='/posts' className='btn'>
                Back To Posts
            </Link>
            <div>
                <Link to={`/profile/${user}`}>
                    <img className='round-img' src={avatar} alt="" />
                    <h4>{name}</h4>
                </Link>
            </div>
            <div>
            <form
                className='form my-1'
                onSubmit={e => {
                    e.preventDefault();
                    addPostEdited({ text }, _id);
                    setText('');
                }}
            >
                <textarea
                    name='text'
                    cols='30'
                    rows='5'
                    placeholder='Edit the post'
                    value={newText}
                    onChange={e => setText(e.target.value)}
                    required
                />
                <input type='submit' className='btn btn-dark my-1' value='Publish' />
            </form>
                <p className='post-date'>
                    Posted on <Moment format='YYYY/MM/DD'>{date}</Moment>
                </p>

                <Fragment>
                    <button
                        onClick={() => deletePost(_id)}
                        type='button'
                        className='btn btn-danger' >
                        <i className='fas fa-times' />
                    </button>
                </Fragment>
            </div>
        </Fragment>
    );
};

EditPost.propTypes = {
    post: PropTypes.object.isRequired,
    deletePost: PropTypes.func.isRequired,
    getPost: PropTypes.func.isRequired,
    addPostEdited: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
    post: state.post
});

export default connect(mapStateToProps, { deletePost, getPost, addPostEdited })(EditPost);

包含操作的文件：

import axios from 'axios';
import { setAlert } from './alert';
import {
    GET_POSTS,
    POST_ERROR,
    ADD_POST,
    GET_POST,
    DELETE_POST,
    ADD_COMMENT,
    REMOVE_COMMENT,
    UPDATE_LIKES,
    EDIT_POST,
    POST_EDITED
} from './types';

export const getPosts = () => async dispatch => {
    try {
        const res = await axios.get('api/posts');

        dispatch({
            type: GET_POSTS,
            payload: res.data
        });
    } catch (err) {
        dispatch({
            type: POST_ERROR,
            payload: { msg: err.response.statusText, status: err.response.status }
        });
    }
};

export const addPostEdited = (formData, id) => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };

    try {
        const res = await axios.put(`/api/posts/${id}`, formData, config);

        dispatch({
            type: POST_EDITED,
            payload: res.data
        });

        dispatch(setAlert('Post Edited', 'success'));
    } catch (err) {
        dispatch({
            type: POST_ERROR,
            payload: { msg: err.response.statusText, status: err.response.status }
        });
    };
};

减速器：

import {
    GET_POSTS,
    POST_ERROR,
    UPDATE_LIKES,
    DELETE_POST,
    ADD_POST,
    GET_POST,
    ADD_COMMENT,
    REMOVE_COMMENT,
    EDIT_POST,
    POST_EDITED
} from '../actions/types';

const initialState = {
    posts: [],
    post: null,
    loading: true,
    error: {}
};

export default function(state = initialState, action) {
    const { type, payload } = action;

    switch (type) {
        case GET_POSTS:
            return {
                ...state,
                posts: payload,
                loading: false,
            };
        case GET_POST:
        case POST_EDITED:
            return {
                ...state,
                post: payload,
                loading: false,
            };
        case EDIT_POST:
            return {
                ...state,
                post: payload,
                loading: false,
            };
        case ADD_POST:
            return {
                ...state,
                posts: [payload, ...state.posts],
                loading: false,
            };
        case DELETE_POST:
            return {
                ...state,
                posts: state.posts.filter(post => post._id !== payload),
                loading: false
            };
        case POST_ERROR:
            return {
                ...state,
                error: payload,
                loading: false
            };
        case UPDATE_LIKES:
            return {
                ...state,
                posts: state.posts.map(post =>
                    post._id === payload.id ? {...post, likes: payload.likes } : post
                ),
                loading: false
            };
        case ADD_COMMENT:
            return {
                ...state,
                post: {...state.post, comments: payload },
                loading: false
            };
        case REMOVE_COMMENT:
            return {
                ...state,
                post: {
                    ...state.post,
                    comments: state.post.comments.filter(
                        comment => comment._id !== payload
                    )
                },
                loading: false
            };
        default:
            return state;
    }

};

标签： javascriptreactjsredux

Answer 1

您将不得不从道具中接收deletePost, getPost, 。 目前您是直接使用它，而不是来自.addPostEdited
connect