getDerivedStateFromProps Не выполняет повторную визуализацию после обновления состояния Redux Reducer.

Question

Я использую новый getDerivedStateFromProps, поскольку componentWillReceiveProps устарел.Однако он не работает должным образом, так как после обновления состояния Redux ничего не происходит.

Ожидается

• Обновление Action / Reducer
• Обновление компонента Main props.modal обновляется, и компонент повторно отображает

Результаты

• Действие / Редуктор обновляется
• Ничего не происходит в главном компоненте

---

"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 };
}

Или впо крайней мере 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 не был правильно подключен ...