Question

有效的方法：

Saga从API中提取数据。 UPDATE_LOTS的reducer启动并返回新状态。
使用chrome扩展程序中的日志记录和日志记录，可以使用正确的数据更新Redux存储。

什么不起作用：

componentDidUpdate永远不会触发。 componentWillReceiveProps也不会被替换。
由于组件从未收到更新，因此也没有重新渲染。

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

有什么想法吗？在此处未列出传奇文件，因为那部分数据流可以正常工作。

组件：

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;
  }
}

Answer 1

除mapStateToProps函数外，其他所有信息都是正确的。

由于使用了ImmutableJS，因此我必须以state.get("lots")而不是state.lots的身份访问状态属性。

这样做可以解决问题。

Redux商店更新后React组件没有收到道具

1 个答案: