React-native Redux 组件不使用布尔值重新渲染状态更改答案

【问题标题】：React-native Redux Component not re-rendering on state change with boolean valueReact-native Redux 组件不使用布尔值重新渲染状态更改
【发布时间】：2019-01-28 15:51:03
【问题描述】：

一旦我调用了一个操作并使用我的 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 上向上滚动之前不会更新视图。

【问题讨论】：

你用过 combinereducers 吗？
我是说你。有多个减速器？
@Sarmad 是的，我确实有一个组合减速器的文件。

标签： javascript reactjs react-native redux react-redux

【解决方案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

【讨论】：

你说得对，这就是我编写示例代码所得到的。在我的真实项目中，它使用的是减速器名称。即使在这个组件上，redux 的其他部分也可以正常工作。
如果你显示你的真实代码会更好，而不是全部。但是不要发布错误的代码，因为它可能会产生误导。
我忘记了不再使用 CWRP。我确实做了这些改变，但我仍然遇到同样的问题。我发布了一个小的编辑视频，以便更好地了解使用该应用时的外观。

【解决方案2】：

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

【讨论】：