dva知识点总结
问题回顾：（工作中突现历史遗留问题，当路由跳转后，通过this.props.dispatch(routerRedux.push({ pathname: '/order/orderDetail', search: queryString.stringify(params) }))，但是跳转的页面this.props里的location.search没有及时更新，导致页面没有重新刷新（现已解决），没有排查到具体原因，所以这边对于先对redux进行进一步的学习一下，卑微ing）
这边进行一些自己的学习总结：Redux:
redux是JavaScript状态容器，提供可预测化的状态管理。
redux的数据流过程：应用中的所有数据都存储在一个store中，改变应用的数据的方法就是派发一个action,action中描述type（描述发生了什么），payload(一些需要更改的数据)，然后在reducer中进行判断来更改store。
import { createStore } from 'redux';
/**
* 这是一个 reducer，形式为 (state, action) => state 的纯函数。
* 描述了 action 如何把 state 转变成下一个 state。
*
* state 的形式取决于你，可以是基本类型、数组、对象、
* 甚至是 Immutable.js 生成的数据结构。惟一的要点是
* 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
*
* 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
* 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);
// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =>
console.log(store.getState())
);
// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1
数据流向图下所示：
单项数据流可以使数据流向比较清晰，容易查看导致数据变化的行为
flux：
redux:
这边也对dva框架进行一些分析：
dva: 基于redux, redux-saga, react-router的轻量级前端框架
ps:
在分析一个项目的时候，先去看看packjson.json，基本可以了解一个项目所用的相关依赖，
scripts:{ “start” : '........'} npm run start后就执行相关的依赖及入口文件等
dva所做的一些事：
1.从‘dva’中引入dva
2.生成一个app对象
const app = dva({ ...createLoading(), // 全局的loading history: createBrowserHistory(), // 支持h5的history api onError(error) { // 错误提示 message.error(error.message) } })
3.加载插件
app.use({})
4.注入model
app.model()
5.添加路由
app.router()
6.启动
app.start('#root')
在这些步骤完成之后，dva完成了使用react解决view层，redux管理model，其实也就是解决了分离动态的data和静态的view
页面搭建过程中 通过connect得到model中的数据，通过派发action来进行model数据的修改。
页面一些本身的数据也可通过react的this.state={}来进行初始和修改
扒一下dva源码那些事
1.dva是个函数，返回了一个app得对象
2.目前 dva 的源码核心部分包含两部分，
dva 和 dva-core。前者用高阶组件 React-redux 实现了 view 层，后者是用 redux-saga 解决了 model 层。看一眼目录结构：
先来看一眼dva目录里得内容:
默认导出一个函数,函数里返回一个对象：
export default function(opt = {}) { const app = create(opts, createOpts); ......... // app上添加一些方法 app.router = router; app.start = start; return app }
// 所以最后一步调用start的方法就是此时绑定的start方法，来看一下start的具体实现
app.start('#root')
function start(container) { // 允许 container 是字符串，然后用 querySelector 找元素 if (isString(container)) { container = document.querySelector(container); invariant(container, `[app.start] container ${container} not found`); } // 并且是 HTMLElement invariant( !container || isHTMLElement(container), `[app.start] container should be HTMLElement`, ); // 路由必须提前注册 invariant(app._router, `[app.start] router must be registered before app.start()`); if (!app._store) { oldAppStart.call(app); } const store = app._store; // export _getProvider for HMR // ref: https://github.com/dvajs/dva/issues/469 app._getProvider = getProvider.bind(null, store, app); // If has container, render; else, return react component if (container) { // 如果有真实的dom对象 render(container, store, app, app._router); // 此时的render方法是通过ReacrDOM.render渲染出dom元素 app._plugin.apply('onHmr')(render.bind(null, container, store, app)); // 热加载 } else { // 否则就调用getProvider // getProvider是通过高阶组件包裹组件 // function getProvider(store, app, router) { // const DvaRoot = extraProps => ( // <Provider store={store}>{router({ app, history: //app._history, ...extraProps })}</Provider> // ); // return DvaRoot; // }
//
return getProvider(store, this, this._router); } }
在这里，dva 做了三件比较重要的事情：
1. 使用 call 给 dva-core 实例化的 app(这个时候还只有数据层) 的 start 方法增加了一些新功能（或者说，通过代理模式给 model 层增加了 view 层）。
2. 使用 react-redux 完成了 react 到 redux 的连接。
3. 添加了 redux 的中间件 react-redux-router，强化了 history 对象的功能。
ps: 1.connect方法是在react-redux上引入的
2.dispatch方法是在哪里引入的？？为什么app._store上有dispatch方法
另外，dva上封装了Router的相关内容
import { Redirect, Route, routerRedux, withRouter } from 'dva/router' // 从dva/router上引入
redux是状态管理的库，router是控制页面跳转的库，react-router-redux加强了React Router 中的history这个实例，将history中接受到的变化反应到state中去。
dva在此基础上又进行一层封装，方便其在model的subscriptions中监听router变化。
使用如下：
subscriptions: { async setup({history, dispatch}) { history.listen((location) => { // 监听路由，进行路由变化时的一些监听操作 .............. }) } }
dva-core源码如下：
export function create(hooksAndOpts = {}, createOpts = {}) { const { initialReducer, setupApp = noop } = createOpts; const plugin = new Plugin(); // 声明Plugin构造函数 // constructor() {this._handleActions = null; this.hooks = {key: []}} // 定义了实例方法 use,apply,get plugin.use(filterHooks(hooksAndOpts)); // 过滤已有键filterHooks(hooksAndOpts) // use方法就是对存储的键值对进行处理 const app = { _models: [prefixNamespace({ ...dvaModel })], //返回的是对于reducers的封装 // model.reducers = prefix(reducers, namespace, 'reducer'); // prefix就是把key包装成`${namespace}${NAMESPACE_SEP}${key}`形式 _store: null, _plugin: plugin, use: plugin.use.bind(plugin), // 使用plugin的use方法 model, // 方法 start, }; return app; function model() { } ...... function start() {
...getSaga()
app._getSaga = getSaga.bind(null);
const sagas = [];
const reducers = { ...initialReducer };
for (const m of app._models) {
reducers[m.namespace] = getReducer(m.reducers, m.state, plugin._handleActions);
if (m.effects) {
sagas.push(app._getSaga(m.effects, m, onError, plugin.get('onEffect'), hooksAndOpts));
}
}
........
}
}
对history值进行一层封装，使用 patchHistory 函数代理 history.linsten
即强化了 redux 和 router 的联系，路径变化可以引起 state 的变化，进而听过监听 state 的变化来触发回调
function patchHistory(history) { const oldListen = history.listen; history.listen = callback => { // TODO: refact this with modified ConnectedRouter // Let ConnectedRouter to sync history to store first // connected-react-router's version is locked since the check function may be broken // min version of connected-react-router // e.g. // function (e, t) { // var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2]; // r.inTimeTravelling ? r.inTimeTravelling = !1 : a(e, t, n) // } // ref: https://github.com/umijs/umi/issues/2693 const cbStr = callback.toString(); const isConnectedRouterHandler = (callback.name === 'handleLocationChange' && cbStr.indexOf('onLocationChanged') > -1) || (cbStr.indexOf('.inTimeTravelling') > -1 && cbStr.indexOf('.inTimeTravelling') > -1 && cbStr.indexOf('arguments[2]') > -1); callback(history.location, history.action); return oldListen.call(history, (...args) => { if (isConnectedRouterHandler) { callback(...args); } else { // Delay all listeners besides ConnectedRouter setTimeout(() => { callback(...args); }); } }); }; return history; }
redux-saga
getSaga.js ----本质就是返回一个generator函数
export default function getSaga(effects, model, onError, onEffect, opts = {}) { return function*() { for (const key in effects) { //遍历model所有effect属性 if (Object.prototype.hasOwnProperty.call(effects, key)) { const watcher = getWatcher(key, effects[key], model, onError, onEffect, opts); // 生成一个watcher const task = yield sagaEffects.fork(watcher); yield sagaEffects.fork(function*() { yield sagaEffects.take(`${model.namespace}/@@CANCEL_EFFECTS`); yield sagaEffects.cancel(task); }); } } }; }
dva有自己的一套创建store的方式
app._store = createStore({ reducers: createReducer(), initialState: hooksAndOpts.initialState || {}, plugin, createOpts, sagaMiddleware, promiseMiddleware, });
// createStore export default function({ reducers, initialState, plugin, sagaMiddleware, promiseMiddleware, createOpts: { setupMiddlewares = returnSelf }, }) { // extra enhancers const extraEnhancers = plugin.get('extraEnhancers'); invariant( isArray(extraEnhancers), `[app.start] extraEnhancers should be array, but got ${typeof extraEnhancers}`, ); const extraMiddlewares = plugin.get('onAction'); const middlewares = setupMiddlewares([ promiseMiddleware, sagaMiddleware, ...flatten(extraMiddlewares), ]); const composeEnhancers = process.env.NODE_ENV !== 'production' && win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, maxAge: 30 }) : compose; const enhancers = [applyMiddleware(...middlewares), ...extraEnhancers]; return createStore(reducers, initialState, composeEnhancers(...enhancers)); }
先写到这里吧，待后续再次学习后进行补充。
