Не получено ожидаемое состояние Redux при начальном рендеринге - PullRequest
1 голос
/ 28 апреля 2020

У меня есть приложение для социальных сетей, в котором значение commentCount каждого поста не отображается изначально.

post upon initialization

Redux Dev Сервис сообщает мне, что наши почтовые объекты не получают commentCount

post object not receiving commentCount

Только после запуска действия like или unlike получит ли post объект commentCount

commentCount value renders after like/unlike action

post object with commentCount

Это мой dataReducer

const initialState = {
  posts: [],
  post: {},
  loading: false
};

export default function(state = initialState, action) {
  switch (action.type) {
    case LOADING_DATA:
      return {
        ...state,
        loading: true
      };
    case SET_POSTS:
      return {
        ...state,
        posts: action.payload,
        loading: false
      };
    case LIKE_POST:
    case UNLIKE_POST:
            let index = state.posts.findIndex(
        (post) => post.postId === action.payload.postId
            );
            state.posts[index] = action.payload;
            if (state.post.postId === action.payload.postId) {
                state.post = {...state.post, ...action.payload}
            }
      return {
        ...state
      };
    case SET_POST:
      return {
        ...state,
        post: action.payload
      };

    ...
  }
}

Это мои dataActions

export const getPosts = () => (dispatch) => {
  dispatch({ type: LOADING_DATA });
  axios
    .get('/posts')
    .then(res => {
      dispatch({
        type: SET_POSTS,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch({
        type: SET_POSTS,
        payload: []
      });
    });
};

export const likePost = (postId) => (dispatch) => {
  axios
    .get(`/post/${postId}/like`)
    .then(res => {
      dispatch({
        type: LIKE_POST,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

export const unlikePost = (postId) => (dispatch) => {
  axios
    .get(`/post/${postId}/unlike`)
    .then(res => {
      dispatch({
        type: UNLIKE_POST,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

Вкладка "Сеть" network tab

Есть предложения о том, что происходит? Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...