Я работаю над веб-сайтом, где есть чаты, и в чатах пользователи могут публиковать сообщения, и к этому сообщению могут быть комментарии. Когда кто-то находится в чате, он может видеть все сообщения в этом чате, а когда они нажимают на сообщение, он направляет их на страницу с этим сообщением и комментариями. Моя проблема в том, что мое действие redux вызывает ошибку, что странно, потому что, когда я использую почтальон для получения сообщения, он работает. Это заставляет меня поверить, что в моем действии redux есть ошибка, но я не могу найти, где я ошибся. Когда я получаю сообщение, я сначала получаю его, получая идентификатор чата из чата, в котором он находится, а затем идентификатор сообщения. Ниже я включил компонент Post, действие getPostById и редуктор профиля, который я использую для публикации (GET_POST и RETRIEVE_ERROR - это соответствующие типы, однако RETRIEVE_ERROR - это то, что отправляется). Любая помощь очень ценится. Спасибо!
Компонент сообщения:
import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getPostById } from '../../actions/profile';
const Post = ({
getPostById,
profile: { post },
match }) => {
useEffect(() => {
getPostById(match.params.chatId, match.params.postId)
}, [])
return <Fragment>
Test
</Fragment>
}
//chat.posts ? <Fragment>
//<h1>{post.title}</h1>
//</Fragment> : <h1>Post doesn't exist</h1>
Post.propTypes = {
getPostById: PropTypes.func.isRequired,
post: PropTypes.object.isRequired
}
const mapStateToProps = state => ({
profile: state.profile
});
export default connect(mapStateToProps, { getPostById })(Post);
действие getPostById:
// Get requested post
export const getPostById = (chatId, postId) => async dispatch => {
try {
const res = await axios.get(`/api/chats/posts/${chatId}/${postId}`);
dispatch({
type: GET_POST,
payload: res.data
});
} catch (err) {
dispatch({
type: RETRIEVE_FAIL,
payload: { msg: err.response.statusText, status: err.response.status }
})
}
};
редуктор профиля:
import {
GET_PROFILE,
PROFILE_ERROR,
CLEAR_PROFILE,
GET_CHAT,
GET_FAIL,
GET_POST,
RETRIEVE_FAIL
} from '../actions/types';
const initialState = {
profile: null,
loading: true,
error: {},
chat: null,
post: null
}
export default function (state = initialState, action) {
const { type, payload } = action;
switch (type) {
case GET_PROFILE:
return {
...state,
profile: payload,
loading: false
};
case GET_CHAT:
return {
...state,
chat: payload,
loading: false
}
case GET_POST:
return {
...state,
post: payload,
loading: false
}
case PROFILE_ERROR:
case GET_FAIL:
case RETRIEVE_FAIL:
return {
...state,
error: payload,
loading: false
};
case CLEAR_PROFILE:
return {
...state,
profile: null,
loading: false
}
default:
return state;
}
}