Question

Hello StackOverflow社区，

在相当长的一段时间里，我一直困扰着一个问题：如何在React中处理异步API调用以及redux并正确地重新组合。在StackOverflow上研究了很多案例，但主要找到了涉及组件状态的答案，以检查＆＃34; isLoading＆＃34;设置为true或false，并使用接收的数据呈现加载指示符或实际组件。我的问题在其他地方。在我的项目中，我使用重构来创建更高阶组件，它将使用重构分支来显示Spinner组件是否＆＃34; isFetching＆＃34;如果它是假的，则为true或component。

问题在于我正在举行＆＃34; isFetching＆＃34;在redux存储中标记，我想从那里使用标志，而不是从组件状态，因此其他组件将知道另一个组件正在获取数据。

我的＆＃34; withLoader＆＃34; HOC看起来如下：

const withLoader = branch(
  ({ isFetching }) => isFetching,
  renderComponent(Spinner)
)

这个HOC的实际使用情况如下：

const Component = ({ cover }) => (
  <div>
    <img src={cover.url} />
  </div>
)

const mapStateToProps = (state) => ({
  entity: entitySelector(state),
  isFetching: isFetchingSelector(state),
})

export default compose(
  connect(mapStateToProps, { fetchData }),
  lifecycle({
    componentDidMount() {
      const { fetchData, match: { params } } = this.props
      fetchData(params.id)
    }
  }),
  withLoader
)(Component)

根据分支机构文件，如果＆＃34;对＆＃34;没有提供，如果测试通过，将呈现包装的组件。

数据树已标准化，这意味着我的reducer导出了以下组合的reducers：

byId：

const byId = (state = {}, action) => {
  if (!action.payload) return state
  const { entities } = action.payload

  if (!entities || !entities.hasOwnProperty('entityName')) return state
  return merge(state, entities.entityName)
}

allIds：

const allIds = (state = [], action) => {

  switch (action.type) {
    case REQUEST_ENTITY_SUCCESS:
      return action.payload.result
    default:
      return state
  }

}

，最后一个是取费：

const isFetching = (state = false, action) => {
  switch (action.type) {
    case REQUEST_ENTITY:
      return true
    case REQUEST_ENTITY_SUCCESS:
    case REQUEST_ENTITY_FAILURE:
      return false
    default:
      return state
  }
}

到目前为止，我知道componentDidMount生命周期会在组件实际呈现后触发fetchData，因此会抛出错误，因为cover是未定义的。就像我说的：主要是在web中我可以找到涉及组件状态的解决方案，但是如果我的＆＃34; isFetching＆＃34;我在这种情况下看不到使用组件状态的任何意义。指标存储在redux商店中。

我的问题是如何正确地制作我的＆＃34; withLoader＆＃34; HOC功能使用isreetching from redux state而不使用组件内部状态？

对于有点冗长的问题感到抱歉，但我想把所有内容都清楚，并用实际代码覆盖。

等待来自API的数据在使用redux进行组件渲染之前加载并重构

0 个答案: