ReactJS-Like和不像使用相同的按钮更新而不刷新页面

我在学习一门Udemy课程,他们有一个不一样和喜欢的按钮,在那里他们是分开的。我想试着把它们变成1个按钮,这样按钮就可以在不刷新页面的情况下切换和更新喜欢的数量。

在函数组件的return()中有类似的内容

{posts.filter(item => item.user.toString() === user).length > 0 ? (
  <button onClick={e => unlike(_id)}>Unlike</button>
) : (
  <button onClick={e => like(_id)}>Like</button>
)}

这个ony只在页面加载时呈现一次,根据条件语句的不同,它只呈现不相似或相似的内容。用户只能喜欢一次,所以如果用户已经喜欢一篇文章,在页面加载时,它会加载不喜欢按钮,如果用户单击不喜欢,它会保持不喜欢,并且不会刷新视图。

{posts.length}

我如何在不刷新页面的情况下进行此操作,并在用户操作时重新返回页面?

// Like
export const like = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/like/${id}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data }
    });
  } catch (err) {

  }
};

// Unlike
export const unlike = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/unlike/${id}`);

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data }
    });
  } catch (err) {

  }
};

减速器/立柱

import {
  GET_POSTS,
  POST_ERROR,
  UPDATE_LIKES,
  ADD_POST
} 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 ADD_POST:
      return {
        ...state,
        posts: [...state.posts, payload],
        loading: false
      };
    case POST_ERROR:
      return {
        ...state,
        posts: payload,
        loading: false
      };
    case UPDATE_LIKES:
      return {
        ...state,
        posts: state.posts.map(post =>
          post._id === payload.id
            ? { ...post, likes: payload.likes }
            : post
        ),
        loading: false
      };
    default:
      return state;
  }
}