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的应用