redux 状态的变化不会导致未调用组件/componentDidUpdate 的变化

Question

我有一个 post details 组件，点击 like 按钮，redux 状态会改变，redux 状态就像

post秒 ->post详情

我正在更改属性的点赞数和 postDetais 对象的点赞数，单击点赞按钮时，点赞的属性将从 false 设置为 true，反之亦然并且点赞数增加。

但是状态正在改变，但 componentDidUpdate 方法没有触发

PostDetails.js

import React, { Component } from "react";
import { connect } from "react-redux";
import {
  getPostData,
  likePost,
  unlikePost
} from "../../store/actions/postsActions";
import { Icon, Tooltip } from "antd";
import { Link } from "react-router-dom";

export class PostDetails extends Component {
  state = {
    postData: this.props.postDetails
  };

  componentDidMount() {
    this.props.getPostData(this.props.match.params.post_id);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(this.props.postDetails);
    if (prevProps.postDetails !== this.props.postDetails) {
      this.setState({
        postData: this.props.postDetails
      });
    }
  }

  render() {
    const { postData } = this.state;
    const liked = postData.liked;
    return (
      <div className="postDetails">
        {postData && (
          <div className="postDetailsContainer">
            <div className="postImage">
              <img src={postData.imageUrl} alt={postData.caption} />
            </div>
            <div className="postContent">
              <div className="postContent__header">
                <Link
                  to={`/user/${postData.username}`}
                  className="postContent__headerContent"
                >
                  <img
                    src={postData.profileUrl}
                    alt={postData.username}
                    className="postContent__profileImage"
                  />
                  <p className="postContent__username">{postData.username}</p>
                </Link>
              </div>

              <div className="postComments" />
              <div className="postInfo">
                <div className="postActions">
                  {liked ? (
                    <Tooltip title="Unlike post">
                      <Icon
                        type="heart"
                        className="likePost"
                        theme="filled"
                        style={{ color: "#d41c00" }}
                        onClick={() => this.props.unlikePost(postData.id)}
                      />
                    </Tooltip>
                  ) : (
                    <Tooltip title="Like post">
                      <Icon
                        type="heart"
                        className="likePost"
                        onClick={() => this.props.likePost(postData.id)}
                      />
                    </Tooltip>
                  )}
                  <Tooltip title="Comment">
                    <Icon type="message" className="commentButton" />
                  </Tooltip>
                </div>
                <Tooltip title="Refresh comments">
                  <Icon type="reload" className="reloadComments" />
                </Tooltip>
              </div>
              <div />
            </div>
          </div>
        )}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    postDetails: state.posts.postDetails
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getPostData: postId => dispatch(getPostData(postId)),
    likePost: postId => dispatch(likePost(postId)),
    unlikePost: postId => dispatch(unlikePost(postId))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PostDetails);

postsReducer.js

const initialState = {
  creatingPost: false,
  feed: [],
  createdPost: false,
  feedUpdated: false,
  postDetails: {}
};

const postsReducer = (state = initialState, action) => {
  switch (action.type) {
    case "CREATING_POST":
      return {
        ...state,
        creatingPost: true,
        createdPost: false
      };
    case "ADD_POST":
      return {
        ...state,
        feed: state.feed.concat(action.payload)
      };
    case "FETCH_FEED":
      return {
        ...state,
        feed: action.payload
      };
    case "CREATED_POST":
      return {
        ...state,
        creatingPost: false,
        createdPost: true
      };
    case "UPDATE_FEED":
      return {
        ...state,
        feed: action.payload,
        feedUpdated: true
      };
    case "GET_POST_DATA":
      return {
        ...state,
        postDetails: action.payload
      };
    case "RESET_FEED_UPDATED":
      return {
        ...state,
        feedUpdated: false
      };
    case "RESET_CREATED_POST":
      return {
        ...state,
        createdPost: false
      };
    case "LIKED_POST":
      const { postDetails } = state;

      postDetails.liked = true;
      postDetails.likes += 1;
      return {
        ...state,
        postDetails: postDetails
      };

    case "UNLIKED_POST":
      const postDetails1 = state.postDetails;

      postDetails1.liked = false;
      postDetails1.likes -= 1;

      return {
        ...state,
        postDetails: postDetails1
      };
    case "CLEAR_POST_DATA":
      return initialState;
    default:
      return state;
  }
};

export default postsReducer;

postsActions.js

import Axios from "axios";
import moment from "moment";
import store from "../store";
export const createPost = postData => {
  return (dispatch, getState) => {
    dispatch({ type: "CREATING_POST" });

    Axios.post("/api/post/new", {
      imageUrl: postData.imageUrl,
      caption: postData.caption
    })
      .then(res => {
        dispatch({ type: "CREATED_POST" });

        dispatch({ type: "ADD_POST", payload: res.data.post });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const fetchFeed = () => {
  return (dispatch, getState) => {
    Axios.get("/api/user/feed")
      .then(res => {
        var feed = res.data.feed;
        const state = store.getState();
        const likedPosts = state.user.userData.likedPosts;

        for (var i = 0; i < feed.length; i++) {
          for (var j = 0; j < feed.length - i - 1; j++) {
            if (moment(feed[j + 1].createdAt).isAfter(feed[j].createdAt)) {
              var temp = feed[j];
              feed[j] = feed[j + 1];
              feed[j + 1] = temp;
            }
          }
        }

        for (var i = 0; i < feed.length; i++) {
          if (likedPosts.indexOf(feed[i]._id) > -1) {
            feed[i]["liked"] = true;
          } else {
            feed[i]["liked"] = false;
          }
        }

        console.log(feed);
        dispatch({ type: "FETCH_FEED", payload: feed });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const likePost = postId => {
  return (dispatch, getState) => {
    Axios.put("/api/post/like", { postId: postId })
      .then(res => {
        const feed = store.getState().posts.feed;

        feed.forEach(post => {
          if (post._id === postId) {
            post.liked = true;
          }
        });

        dispatch({ type: "UPDATE_FEED", payload: feed });
        dispatch({ type: "LIKED_POST", payload: res.data.postId });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const unlikePost = postId => {
  return (dispatch, getState) => {
    Axios.put("/api/post/unlike", { postId: postId })
      .then(res => {
        const feed = store.getState().posts.feed;

        feed.forEach(post => {
          if (post._id === postId) {
            post.liked = false;
          }
        });

        dispatch({ type: "UPDATE_FEED", payload: feed });
        dispatch({ type: "UNLIKED_POST", payload: res.data.postId });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const getPostData = postId => {
  return (dispatch, getState) => {
    Axios.get(`/api/post/${postId}`)
      .then(res => {
        const likedPosts = store.getState().user.userData.likedPosts;

        if (likedPosts.indexOf(postId) > -1) {
          res.data.post["liked"] = true;
        } else {
          res.data.post["liked"] = false;
        }

        dispatch({ type: "GET_POST_DATA", payload: res.data.post });
      })
      .catch(err => {
        console.log(err);
      });
  };
};

export const resetFeedUpdated = () => {
  return (dispatch, getState) => {
    dispatch({ type: "RESET_FEED_UPDATED" });
  };
};

export const resetCreatedPost = () => {
  return (dispatch, getState) => {
    dispatch({ type: "RESET_CREATED_POST" });
  };
};

Answer 1

你的 LIKED_POST 和 UNLIKED_POST reducer 案例不是纯粹的 - 它们正在改变状态中现有的 postDetails 对象并将其放回 state 所以 connect 在 componentShouldUpdate 中的上一个和下一个道具对 postDetails 进行浅层相等比较时正在优化而不是重新渲染。确保您正在为 postDetails 创建一个全新的值，例如：

    case "LIKED_POST":
      const { postDetails } = state;

      const newPostDetails = {
        ...postDetails,
        liked: true,
        likes: postDetails.likes + 1,
      };
      return {
        ...state,
        postDetails: newPostDetails
      };

Answer 2

您应该检查比较 if (prevProps.postDetails !== this.props.postDetails) 是否命中。因为使用 like 函数你只改变同一个对象的属性，所以比较会失败，因为它仍然是 postDetails 的同一个对象引用。尝试 return 在你的 reducer 中创建一个新对象：

case "LIKED_POST":
      const { postDetails } = state;

      postDetails.liked = true;
      postDetails.likes += 1;
      return {
        ...state,
        postDetails: {
           ...postDetails
        },
      }

此外，如果您不更改组件内的任何对象但在 Redux 存储中，为什么不直接使用组件属性？您可以删除状态对象和 componentDidUpdate。您也可以将其重构为功能组件。

  render() {
    const { postDetails: postData } = this.props;
    ...
  }

Answer 3

使用 Redux 时，永远不要忘记三个原则

单一事实来源
状态仅就绪
Reducers 必须是纯函数：Reducers 获取先前的状态和一些动作并修改它和 return 的新状态。我们永远不应该改变状态。我们应该创建新对象和 return 它们。

你已经改变了你的 reducer 函数中的现有状态。这不会触发 componentdidupdate，因为 connect 方法（它检查 mapStateToProps）认为没有任何变化（它检查引用，因为引用没有变化，组件没有被调用）。

您可以使用 Object.assign 或使用扩展运算符，这有助于使您的缩减器 return 成为一个新对象。

将您的 Liked 和 unlinked posts reducer 函数更改为 return 一个新对象，而不是改变现有对象。

@azundo 添加了您的代码应该如何实现您的需求。

redux 状态的变化不会导致未调用组件/componentDidUpdate 的变化

Change in redux state does not cause change in component / componentDidUpdate not called

javascript

reactjs

redux

react-redux