getDerivedStateFromProps更新Redux Reducer狀態后不重新呈現

Question

我正在使用新的getDerivedStateFromProps因為不推薦使用componentWillReceiveProps 。 但是它似乎沒有按預期工作，因為在更新Redux狀態后沒有任何反應。

預期

• Action / Reducer已更新
• Component Main的props.modal已更新，組件重新渲染

結果

• Action / Reducer已更新
• 主要組件中沒有任何反應

---

"react": "^16.3.2",
"react-dom": "^16.3.2",

請注意這個截圖，我能夠更新Redux狀態， modal已經更新，但我的組件沒有更新和重新渲染。

我希望第二次調用此代碼：

static getDerivedStateFromProps(nextProps, nextState) {
  const { modal } = nextProps;
  console.log('getDerivedStateFromProps', nextProps);
  console.log(' nextState', nextState);
  return { modal };
}

或者至少我的render方法中的console.log被稱為兩次，這種情況從未發生過。 有什么想法嗎？

組件代碼：

 import React, { Component } from "react";
 import { connect } from "react-redux";

 // MUI
 import { withStyles } from "@material-ui/core/styles";

 // Components
 import TopNav from "components/Common/topNav";
 // import ProductModal from 'components/Common/productModal';

 // Utils
 import { findNotification, showNotification } from "utils/notifications";

 const styles = {
  root: {
    flexGrow: 1,
    display: "flex",
    flexDirection: "column",
    height: "100%"
  }
  };

  class Main extends Component {
   static getDerivedStateFromProps(nextProps, nextState) {
    const { modal } = nextProps;
    console.log("getDerivedStateFromProps", nextProps);
    console.log(" nextState", nextState);
    return { modal };
}

constructor(props) {
    super(props);

    this.state = {
        modal: {}
    };
}

componentDidUpdate(props) {
    console.log("componentDidUpdate", props);
}

render() {
    const {
        classes,
        children,
        notifications,
        currentNotification
    } = this.props;

    console.log("this.props", this.props);
    console.log("this.state", this.state);

    const notificationObj = findNotification(
        currentNotification,
        notifications
    );

    return (
        <div className={classes.root}>
            {/* <ProductModal /> */}
            <TopNav />
            {showNotification(notificationObj)}
            {children}
        </div>
    );
}
}

const mapStateToProps = ({ modal }) => ({
modal
});

export const MainJest = Main;

export default connect(
mapStateToProps,
null
)(withStyles(styles)(Main));

減速器：

import {
  MODAL_CLOSE_MODAL,
  MODAL_SET_MODAL
} from 'actions/types';

export const initialState = {
  modal: {
    name: '',
    props: {}
  }
};

const modalsReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case MODAL_SET_MODAL:
      return {
        ...state,
        modal: {
          name: payload.modalName,
          props: payload.modalProps
        }
      };
    case MODAL_CLOSE_MODAL:
      return {
        ...state,
        modal: {
          name: '',
          props: {}
        }
      };
    default:
      return state;
  }
};

export default modalsReducer;

Answer 1

事實證明我的問題出在mapStateToProps

需要從modalsReducer拉出狀態

const mapStateToProps = (state) => {
  console.log('mapStateToProps state:', state);
  return state.modalsReducer;
};

還需要在modalsReducer展平我的狀態

import {
  MODAL_CLOSE_MODAL,
  MODAL_SET_MODAL
} from 'actions/types';

export const initialState = {
  modalName: '',
  modalProps: {}
};

const modalsReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case MODAL_SET_MODAL:
      return {
        ...state,
        modalName: payload.modalName,
        modalProps: payload.modalProps
      };
    case MODAL_CLOSE_MODAL:
      return {
        ...state,
        modalName: '',
        modalProps: {}
      };
    default:
      return state;
  }
};

export default modalsReducer;

所以Redux沒有正確連接......