9.数据的异步ajax

前言

这节我们将实现数据的异步获取,主要用到了:

  • redux-async-connect:数据异步取,并将状态放入store中。
  • redux-devtools:redux状态树开发工具,可以直观的看到action的各种状态

步骤

  1. 装饰器连接需要的数据。

     @asyncConnect([{
       promise:({store:{dispatch,getState}}) =>{
         if(!infoLoaded(getState())){
           return dispatch(loadInfo())
         }
       }
     }])
    
  2. reducer放入redux的store中

     import {reducer as reduxAsyncConnect} from 'redux-async-connect'
     const rootReducer = combineReducers({
       counter,
       info,
       reduxAsyncConnect
     })
    
  3. 在router中进行redner

     <Router render={(props) => <ReduxAsyncConnect {...props}/>} history={browserHistory}>
    

进行上面的配置后,就可以在应用启动时异步取得数据了

配置redux-tools

创建devTools

import React from 'react'

//从redux-devtools中引入createDevTools
import { createDevTools } from 'redux-devtools';

//显示包是单独的,要额外指定
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

//创建DevTools组件
const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey  ='ctrl-q'>
    <LogMonitor theme='tomorrow' />
  </DockMonitor>
);

module.exports = DevTools

在创建store时,将devTools加入里面

const enhancer = compose(
    applyMiddleware(thunk,clientMiddleware),
    DevTools.instrument()
)

最后在render时插入devTools

if (process.env.NODE_ENV !== 'production') {

  const DevTools = require('./components/DevTools/DevTools')
  const popup = document.getElementById('app')
  let div = document.createElement('div');
  div.id = "react-devtools-root"

  setTimeout(() => {
    popup.appendChild(div);
    ReactDOM.render(
      <DevTools store={store} />,
      document.getElementById('react-devtools-root')
    );
  }, 10);
}

Next

Widgets组件编写主要是redux-form的应用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容