Question

调用动作并使用reducer更新商店后，我无法重新渲染组件。实际的问题是，单击按钮后，我无法显示模态组件。

状态正确更新。我可以看到我存储中的布尔值从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中还有其他部分工作正常，出于某种原因，这对我不起作用。

Here's a short video on what's happening in my live app似乎状态发生了变化，但是直到我执行类似尝试在该页面上的FlatList上滚动时，才更新视图。

Answer 1

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

正如我在上面的代码中看到的，您正在使用state.showModal来获取showModal变量，但是您不能因为您在减速器中使用了一个物体，所以应该是

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

reducerName是您在CombineReducers内部使用的reducer键

还有一件事，您的componentWillReceiveProps逻辑也无法正常工作，在比较两个对象时。

我建议您使用componentDidUpdate()，因为不建议使用cWRP。并检查比较this.props.showModel而不是this.props。例如

this.props.showModal !== nextProps.showModal 您可以在此处了解有关对象相等性的更多信息

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

Answer 2

感谢所有帮助。我发现我没有正确导出减速器。

当使用布尔值更改状态时，React-native Redux组件不会重新呈现

2 个答案: