Question

我正在使用Redux来创建我的分页。我的问题是，在constructor我运行了一个方法来解析网址，并检查是否有任何关于分页的内容。然后它运行一个动作，将数据放入我的商店。一切顺利。

然后，当我运行另一个操作时，我有componentDidMount方法 - 获取数据。在那里，我使用了我以前推过的道具。不幸的是，商店处于初始状态。

我的（简化）代码：

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

        this.profile = document.getElementById('articles').getAttribute('data-profile');

        this.parseHash();
    }

    parseHash() {
        /* Method for parsing navigation hash
         ---------------------------------------- */
        const hash = window.location.hash.replace('#', '').split('&');

        const data = {
            page: 1,
            offset: 0
        };

        // hash parsing

        this.props.setPagination(data);
    }

    componentDidMount() {
        this.loadNews();
        // If I use
        // setTimeout(() => { this.loadNews(); })
        // it works, but I feel this is hack-ish
    }

    loadNews() {
        this.props.update({
            current:  {page: this.props.NewsListReducer.current.page, offset: this.props.NewsListReducer.current.offset},
            next:     {page: this.props.NewsListReducer.next.page, offset: this.props.NewsListReducer.next.offset}
        });
    }
}

当我console.log(this.props.NewsListReducer)时，undefined和current对象都获得了next，但是当我使用Redux DevTools时，数据就在那里。我该怎么办？

Answer 1

似乎那里有一些异步性。您可能正在使用react-redux吗？我认为异步性来自connect ed组件，因为它使用setState when the store state has changed。 setState计划不同步状态更新。

因此this.props.NewsListReducer中的componentDidMount()不是最新的。

我猜this.props.update是一个可以获取新闻的动作，对吧？为什么有必要从组件提供分页信息？例如。使用redux-thunk，您可以在调度操作之前访问存储状态。这可能是您阅读（最新）寻呼信息的机会。

E.g。

export function fetchNews() {
  return (dispatch, getState) => {
    getState().NewsListReducer.current.page; // Up to date

    ...

    fetch(...).then(() =>
      dispatch({...}));
  }
}

顺便说一下。不打电话给你的州*Reducer可能是个好主意。它是管理状态的减速器，但减速器不是那种状态的一部分。

React - constructor（）和componentDidMount

1 个答案: