首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何设置redux-promise,使axios请求有时间完成?

如何设置redux-promise,使axios请求有时间完成?
EN

Stack Overflow用户
提问于 2018-06-10 13:48:56
回答 1查看 78关注 0票数 0

新的反应和复习,所以请容忍我。

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

当我打印this.props时,我得到一个错误,this.props.sparts.map不是一个函数,sparts是空的,所以我假设请求没有完成。

组件

代码语言:javascript
复制
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);

操作

代码语言:javascript
复制
export function getSparts() {
  const request = axios.get(`${BASE_URL}/sparts`)

  return {
    type: GET_SPARTS,
    payload: request
  }
}

还原器

代码语言:javascript
复制
export default function(state = {}, action) {
  switch (action.type) {
  case GET_SPARTS:
    return [ action.payload.data, ...state ]
  default:
    return state;
  }
}

中间件

代码语言:javascript
复制
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.getElementById('root'));
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50780933

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档