Redux 商店更新后，React 组件未收到道具

debugcn 发表于 Dev

咳咳

什么工作：

Saga 从 API 中提取数据。reducer forUPDATE_LOTS启动并返回新状态。
Redux 存储更新为正确的数据，可以在 chrome 扩展和日志中观察到。

什么不起作用：

将componentDidUpdate永远不会触发了。componentWillReceiveProps被它取代时也不会。
由于组件从未收到更新，因此也没有重新渲染。

关于这个主题的大部分建议都讨论了人们如何意外地改变状态，但在我的情况下，我不这样做。我还尝试了以下构造，{...state, lots: action.data}而不是使用 ImmutableJS Map.set，但没有运气。

有任何想法吗？此处未列出 saga 文件，因为该部分数据流运行良好。

组件：

class Lots extends React.Component {
  constructor(props) {
    super(props);

    this.props.onFetchLots();
  }

  componentDidUpdate() {
    console.log('updated', this.props.lots);
  }

  render() {
    const lots = this.props.lots;
    console.log('render', lots);
    return (lots && lots.length) > 0 ? <Tabs data={lots} /> : <div />;
  }
}

映射和组合：

function mapDispatchToProps(dispatch) {
  return {
    onFetchLots: () => {
      dispatch(fetchLots());
    },
  };
}

function mapStateToProps(state) {
  return {
    lots: state.lots,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'lots', reducer: lotsReducer });
const withSaga = injectSaga({ key: 'lots', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(Lots);

减速器：

export const initialState = fromJS({
  lots: false,
});

function lotsReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_LOTS:
      console.log('fetch lots');
      return state;

    case UPDATE_LOTS:
      console.log('update lots', action.data.data);
      return state.set('lots', action.data.data);

      default:
      return state;
  }
}

咳咳

除了mapStateToProps功能之外，一切都是正确的。

由于使用了 ImmutableJS，我不得不访问 state 属性state.get("lots")而不是state.lots.

这样做解决了问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。