Question

我正在使用React-Redux。

我有一个在App的componentDidMount中提取集合数据的函数。

然后我有一个Collection组件需要这些数据才能正确呈现。

我不能使用承诺，因为它们都在不同的组件中。

我该怎么办？

将两个函数放在同一个组件中对于组织目的来说真的很糟糕。

Answer 1

如果您决定使用redux，则必须通过操作存储来自第一个组件的数据。然后将第二个连接到redux并从状态获取数据。使这个工作的唯一要求是开发第二个组件，这样它就能在没有数据的情况下工作。当数据出现时，您会触发逻辑。或者你可能必须有条件地渲染第二个组件，如

data && <SecondComponent data={ data } />

Answer 2

你必须在componentDidMount上调度异步操作Redux Async action，这将更新状态树，在satate树更新后，所有侦听器的商店外观和订阅的所有反应组件都将更新

您可以使用此中间件React thunk middle ware或Redux Saga

Answer 3

您应该使用redux来存储application state。并connect所有需要访问数据的组件。

您可以使用redux-saga或redux thunk for dispatching action which will call api to fetch data。

Answer 4

您可以使用Redux：假设你在第一个组件中进行了一次获取调用，那么在redux的情况下，它将通过action creater自动更新存储，它将调度一个动作，该动作将调用具有新状态的reducer，并且它将使用new更新存储现在。只要另一个组件呈现，它就会通过其商店在其组件中获得更新状态。

在行动中使这个功能

const fetchContent = () => {
  return (dispatch) => {
    return http.get(dispatch, `${config.serverUrl}/content`, null, {
     'Accept': CONTENT_LIST
    }).then((contentList) => {
      dispatch(contentsFetched(contentList))
    }).catch(handleErrors(dispatch))
  }
}

const contentsFetched = (contents) => ({
  type: constants.CONTENTS_FETCHED,
  contents
})

减速

case constants.CONTENTS_FETCHED:
      return Object.assign({}, state, {
        contents: action.contents,
        status: 'SUCCESS'
      })

componentDidMount中的异步函数后跟另一个组件的渲染函数

4 个答案: