前言
这节我们将实现数据的异步获取，主要用到了：
- redux-async-connect:数据异步取，并将状态放入store中。
- redux-devtools:redux状态树开发工具，可以直观的看到action的各种状态
步骤
-
装饰器连接需要的数据。
@asyncConnect([{ promise:({store:{dispatch,getState}}) =>{ if(!infoLoaded(getState())){ return dispatch(loadInfo()) } } }]) -
reducer放入redux的store中
import {reducer as reduxAsyncConnect} from 'redux-async-connect' const rootReducer = combineReducers({ counter, info, reduxAsyncConnect }) -
在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的应用
