Ajax 在react/redux上提取未正常工作

我是react的新手，尝试使用以下功能创建我的第一个项目：react、redux、react路由器、redux thunk。我使用json从url获取数据。它在powerfull pc上运行良好，在wicker上它将不工作，因为在我了解的情况下，它开始抓取，然后它尝试渲染没有数据的组件，然后它才从url获取数据。。。同样的结果，当我刷新innerpage时，它将尝试在获取数据之前呈现组件

下面是创建商店的步骤：

const middleware = [routerMiddleware(hashHistory)];

const store = createStore( combineReducers({
    reducers:reducers,
    routing:routerReducer
}),compose(applyMiddleware(...middleware, thunk), 
          window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

const history = syncHistoryWithStore(hashHistory, store);

这是我的提供者：

ReactDOM.render(
    <Provider store={store}>
    <Router history={history}>     
      <Route path="/" component={withTransition(App)}>
        <IndexRoute component={Projects} />
        <Route path="project/:id/" component={SingleProject}>
        </Route>
      </Route>
    </Router>
    </ Provider>,
    document.getElementsByClassName('root')[0]
)

我以这种方式获取数据：

function fetchProjRequest(){
  return {
    type: "FETCH_PROJ_REQUEST"
  }
}

function fetchProjSuccess(payload) {
  return {
    type: "FETCH_PROJ_SUCCESS",
    payload
  } 
}

function fetchProjError() {
  return {
    type: "FETCH_PROJ_ERROR"
  }
}

function fetchProj() {
  const URL = "http://****.com/data/proj";
  return fetch(URL, { method: 'GET'})
     .then( response => Promise.all([response, response.json()]));
}

class App extends Component{

  constructor(props){
    super(props);
    this.props.fetchProjWithRedux();

  }


  render(){
    return (
     <div className={styles.app}>
       <Logo />
        <TagFilter />
        <div className={styles.content}>
          {this.props.children}
        </div>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    proj: state.proj
  }
}

export default connect(
  state => ({
    proj: state.reducers.projects.proj
  }),
  dispatch =>({
    fetchProjWithRedux: () => {
      fetchProj().then(([response, json]) =>{
        if(response.status === 200){
          dispatch(fetchProjSuccess(json))
        }
        else{
          dispatch(fetchProjError())
        }
      })
    },
  })
)(App);

如果你们中有人告诉我我错了，那就太好了：这对我来说非常重要

是hoc的要点，它能满足您的需要

确保在减速器中引入isDataLoaded boolean prop，并在调用FETCH_PROJ_SUCCESS时使其为真。希望能有帮助

对代码的一些更改：

import dataLoader from './dataLoader';

const AppWithLoader = dataLoader(App);

export default connect(
  state => ({
    isDataLoaded: state.proj.isDataLoaded,
    proj: state.reducers.projects.proj
  }),
  dispatch =>({
    dispatchGetData: () => {
      fetchProj().then(([response, json]) =>{
        if(response.status === 200){
          dispatch(fetchProjSuccess(json))
        }
        else{
          dispatch(fetchProjError())
        }
      })
    },
  })
)(AppWithLoader);

---

它应该是这样工作的，因为抓取是异步的。引入一个isLoading布尔值，当您得到响应时，它将变为false。当其为true时，渲染加载程序或其他内容，而不是component@JohnnyKlironomos你有没有看到过这样的实例，如果能在现实中看到这个，那就太好了？你可能还想看看redux的异步中间件，比如。@MichaelPeyper谢谢你，但我已经在使用它了，但它没有帮助…嗯，有趣的模块。我不知道这样的存在。现在我已经找到了解决办法，但在将来，我想我会用它！非常感谢。