dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

1，创建dva新应用

安装dva-cli
$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

创建应用
dva new dva-quickstart

2，配置路由

注册路由 index.js:

const app = dva();
app.router(require('./router').default);

路由使用router.js

import { Router,Route,Switch，Redirect } from  'dva/router';
import App from './app';
function RouterConfig({history}) {
  return  (
     <Router history={history}>
        <Switch>
           <Route path="/" render={()=>
               <App>
                <Switch>
                  <Route path="/film" component = {File}/>
                  <Route path="/cinema" component = {Cinema}/>
                  <Route path="/center" component = {Center}/>
                  <Redirect from="" to="/film"></Redirect>
                <Switch/>
               </App>
            }/>
        </Switch>
     </Router>
  )
}

路由连接：

import {NavLink} from 'dva/router';
<NavLink to="/film/:id">film</NavLink>

被路由匹配的组件可以直接从从props获取history等信息。

更改路由模式

dva中默认的路由模式为hash模式，如果需要改为browser模式，可以在项目入口index.jsx中修改

const app = dva({
   history:require("history").createBrowserHistory()
})

models

在index.js中注册models:

app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent({dispatch}) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

可以将modals单独放在一个文件，然后使用app.model(require('./models/example'.default)进行引用

model结构：

{
  namespace:"app",
  //共用状态
  state:{
     list:[],
     isShow:true
  },
  //同步actions
  reducers:{
    getlist(prestate,action){
      return {...prestate,action.payload}
    }
    
    show(prestate,action){
      return {
       ...prestate,
       isShow:true
      }
    }
    
  },
  //异步action,最后还是需要调用reducers修改state
  effects:{
    *getCinemaList(action,{call,put){
      const res = yield call(getCinmalistService);
      yield put({
        type:"getlist",
        payload:res.data.list
      })
    }
  }
}

getCinmalistService是一个封装fetch的异步处理的函数。

代码中使用models状态：

import {connect} from 'dva';
function App(props){
  return(<div>
           {props.list}
           <button onClick={()=>{
               props.dispatch({
                 type:"app/isShow"//一定要写命名空间
               })
             }}
           </button>
        </div>
        )
}

export default connect((state)=>{
  return {
    list:state.app.list
   }
})(App)

• 只要组件被connect包裹就可以调用props中的dispatch

• 使用connect可以使组件很方便的使用对应model中的state