React Redux：连接到redux后组件未更新

Question

这个问题可能看似多余，但在调用mapStateToProps后，我的组件似乎没有更新。下面是我在Home Component中编写的一段代码（在类声明之外的ofc）。

function mapStateToProps(state) {
  const { tickets } = state;
  console.tron.log(tickets)
  if(!tickets.isLoading) {
    return {
      loading: false,
      ticketsModel: tickets.chunkedData
    }
  }
  return {
    loading: true
  }
}
export default connect(mapStateToProps)(Home);

一切正常，但对props的更改并未触发组件中的更新。

PS：我检查了是否发生了任何状态突变，但没有发生。我重新创建了一个像

这样的新状态

case RECEIVE_TICKETS :
      return Object.assign({},state,{
        isLoading: false,
        chunkedData: action.data.extractChunkedData(),
        completeData: action.data.getCompleteData(),
      }); 

编辑：问题已经排序。傻我正在检查componentWillMount中的更新而不是componentWillReceiveProps

Answer 1

您可以更简洁地编写mapStateToProps：

function mapStateToProps(state) {
  const { isLoading, chunkedData } = state.tickets;
  return {
    loading: isLoading,
    ticketsModel: chunkedData
  };
}
export default connect(mapStateToProps)(Home);

查看mapStateToProps函数和Redux记录器后，您的问题很可能出在组件本身。如果您要在组件中呈现this.props.loading，则应该看到true然后false。

另外，我发现你的chunkedData数组没有初始状态。设置tickets对象的初始状态时，应将其设置为空数组。

因此，减速机的前几行应如下所示：

const tickets = (
  state = {
    isLoading: false,
    chunkedData: [],
    // Need more info to know what would go in this object
    completeData: {} 
  },
  action
) => {

查看您是否可以在componentWillReceiveProps生命周期方法中看到道具更改。你应该能够console.log() nextProps，只要道具改变就会改变。

在此处阅读有关生命周期方法的更多信息：http://busypeoples.github.io/post/react-component-lifecycle/