Реактивный компонент Redux не перерисовывает при изменении состояния с логическим значением

Question

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

Состояние обновляется правильно.Я могу видеть, что логическое значение, которое я имею в магазине, меняется с false на true, но оно не обновляет мой компонент с новой информацией.Вот некоторый код ниже:

// Home Page

import React, { Component } from 'react';
import ModalComponent from '../components/modal.component';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { toggleShowModal } from '../actions/modal-actions';

class HomePage extends Component {
  state = {
    // some values
    showModal: false,
  };

  // added on edit
  componentWillReceiveProps(nextProps) {
    if (nextProps !== this.props) {
      this.setState({
        showModal: nextProps.showModal, 
      })
    }
  }

  _toggleModalVisibility = () => {
    // redux action
    this.props.toggleShowModal();
  }

  render() {
    <ModalComponent isVisible={this.state.showModal} />
  }
}

const mapStateToProps = (state) => {
  return {
    showModal: state.showModal,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ toggleShowModal }, dispatch);
};

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

// Actions

import { SHOW_MODAL } from './types';

export const toggleShowModal = () => dispatch => {
  dispatch({
    type: SHOW_MODAL,
    showModal: true,
  });
};

// Reducers (reducers are combined in another file and work fine)

import { SHOW_MODAL } from '../actions/types';

const initialState = {
  showModal: false,
};

export const modalReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_MODAL:
      return {
        ...state,
        showModal: action.showModal,
      };
    default:
      return state;
  }
};

То, что происходит, - это то, что хранилище обновляется с showModal: true, но оно не переводится в представление.Приведенный выше код является лишь примером, потому что проект довольно большой и ошеломляющий.У меня есть другие части в Redux, которые работают нормально, по какой-то причине это не работает для меня.

Вот короткое видео о том, что происходит в моем живом приложении Кажется, что состояние меняется,но не обновляет представление, пока я не сделаю что-то вроде попытки прокрутить вверх FlatList на этой странице.

Answer 1

Спасибо за помощь.Я понял, что неправильно экспортировал свои редукторы.

Answer 2

const mapStateToProps = (state) => {
  return {
    showModal: state.showModal,
  };
};

Как я вижу в приведенном выше коде, вы используете state.showModal, чтобы получить переменную showModal, ну, вы не можете, поскольку вы использовали объект в ваших редукторах, так что это должно быть что-то вроде

return {
    showModal: state.reducerName.showModal,
  };

Где reducerName - это ключ-редуктор, который вы использовали внутри combReducers

Еще одна вещь, логика Вашего componentWillReceiveProps тоже не будет работать, так как вы сравниваете два объекта.

Iрекомендую вам использовать componentDidUpdate(), так как cWRP не рекомендуется.а также проверьте сравнение this.props.showModel вместо this.props.например

this.props.showModal !== nextProps.showModal Подробнее о равенстве объектов можно прочитать здесь

http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html