如何设置 redux-promise 以便 axios 请求有时间完成？答案

【问题标题】：How to setup redux-promise so that axios request has time to finish?如何设置 redux-promise 以便 axios 请求有时间完成？
【发布时间】：2018-06-11 08:59:35
【问题描述】：

react 和 redux 新手，请耐心等待。

我有一个反应容器，它在加载时调用一个动作。该操作返回一个 axios 请求，理想情况下，reducer 将返回结果并更新状态。但是，axios 请求的结果似乎并未完成。

当我打印 this.props 时，我收到一个错误，指出 this.props.sparts.map 不是函数并且 sparts 为空，所以我假设请求没有完成。

组件

class Spart extends Component {
  renderSpart() {
    let sparts = []

    console.log('please print something')
    console.log(this.props)

    this.props.sparts.map((spart, index) => {
      sparts.push(
          <div class="ui column wide spart-container">
            <div class="fake-img"></div>
            <div class="audio-container">
              {spart.song}
            </div>
            <div class="writing-container">
              {spart.writing}
            </div>
          </div>
      )
    })

    return _.chunk(sparts, 3).map(function(group) {
      return <div class="three column row">{group}</div>
    })
  }

  render() {
    return (
      <div class="ui equal width grid spart-container">
        {this.renderSpart()}
      </div>
    )
  }
}

function mapStateToProps(state) {
  console.log('mapStateToProps')
  console.log(state)
  return {
    sparts: state.sparts
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ getSparts: getSparts }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Spart);

动作

export function getSparts() {
  const request = axios.get(`${BASE_URL}/sparts`)

  return {
    type: GET_SPARTS,
    payload: request
  }
}

减速器

export default function(state = {}, action) {
  switch (action.type) {
  case GET_SPARTS:
    return [ action.payload.data, ...state ]
  default:
    return state;
  }
}

中间件

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.getElementById('root'));

【问题讨论】：

标签： reactjs redux promise axios

【解决方案1】：

如果您不使用条件检查渲染部分，这是异步操作的标准问题。使用这样的东西：

{this.props.sparts.length > 0 && this.renderSpart()}

更深入地查看代码后会出现一个问题，永远不会调用 getSparts() 操作。因此，解决方案是像 OP 那样在合适的生命周期方法中调用它，例如 componentDidMount：

componentDidMount() {
    this.props.getSparts();
}

【讨论】：

谢谢，但请求仍然不会更新应用的状态
我不熟悉 redux-promise（我更喜欢 redux-thunk），但我认为人们将它与 redux-actions 一起使用。但是，您在哪里调用 getSparts() 操作？我在您的 Spart 组件中看不到它。我昨天没看到这个。
我刚刚添加了这个componentDidMount() { this.props.getSparts(); }。所以这是一个问题。我以为是自动调用的
不，它不会像您想象的那样自动调用。您应该在需要的地方调用它。现在，你能在组件重新渲染后看到你的 sparts 数据作为你的 prop 吗？
是的，现在正在发出请求。现在正在处理一些 CORS 问题 :) 我会将您的答案标记为正确并支持我的 componentDidMount 评论