标签：sub default 函数 ini push 结构 渲染 ons scribe
Redux 设计和使用的三大原则：
1. 单一数据源：
一个应用永远只有唯一的数据源。使用单一数据源的好处在于整个应用状态都保存在一个对象中，这样我们随时可以 6提取出整个应用的状态进行持久化(比如实现一个针对整个应用的即时保存功能)。此外，这样 的设计也为服务端渲染提供了可能。工具函数combineReducers 可解决该数据源对象过于庞大的问题
2. 状态是只读的：
定义一个 reducer， 它的功能是根据当前触发的 action 对当前应用的状态(state)进行迭代，这里我们并没有直接修改应用的状态，而是返回了一份全新的状态。Redux 提供的 createStore 方法会根据 reducer 生成 store。最后，我们可以利用 store. dispatch方法来达到修改状态的目的。
3. 状态修改均由纯函数完成
Redux 利用每次新返回的状态生成酷炫的时间旅行(time travel)调试方式，让跟踪每一次因为触 发 action 而改变状态的结果成为了可能。
通过 createStore 方法创建的 store 是一个对象，包含以下方法。
? getState():获取 store 中当前的状态。
? dispatch(action):分发一个 action，并返回这个 action，这是唯一能改变 store 中数据的方式。
? subscribe(listener):注册一个监听者，它在 store 发生变化时被调用。
<Provider/> 接受一个 store 作为props，它是整个 Redux 应用的顶层组件，而 connect() 提供了在整个 React 应用的任意组件中获取 store 中数据的功能。
redux-middleware:
import compose from ‘./compose‘;
let newStore = applyMiddleware(mid1, mid2, mid3, ...)(createStore)(reducer, null);//创建一个普通的 store
export default function applyMiddleware(...middlewares) {//applyMiddleware 的结构也是一个多层 currying 的函数。借助 compose，applyMiddleware 可以用来和其他插件加强 createStore 函数:
return (next) => (reducer, initialState) => {
let store = next(reducer, initialState);//利用 createStore 和 reducer 创建了一个 store
let dispatch = store.dispatch;
let chain = [];
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action),
};//store 的 getState方法和 dispatch 方法又分别被直接和间接地赋值给 middlewareAPI 变量 store
chain = middlewares.map(middleware => middleware(middlewareAPI));//middleware 带着 middlewareAPI 这个参数分别执行一遍。执行完后，获得 chain数组,保存的对象是第二个箭头函数返回的匿名函数
dispatch = compose(...chain)(store.dispatch);//将 chain 中的所有匿名函数,组装成一个新的函数，即新的 dispatch。当新 dispatch 执行时,数组内middleware从右到左依次执行
return { ...store,
dispatch,
};
}
}
logger middleware 的实现:
export default store => next => action => {//applyMiddleware 会对 logger 这 个 middleware 进行层层调用，动态地将 store 和 next 参数赋值。
console.log(‘dispatch:‘, action);
typeof action === ‘function‘ ? action(store.dispatch, store.getState) : next(action)//判断 action 是否是函数。如果是，则执行 action，否则继续传递 action 到下 一个 middleware。
console.log(‘finish:‘, action);
}
redux-saga： 采用generator，代替了async、await、promise等
react-router-redux:
对于前端应用来说，路由状态(当前切换到了哪个页面，当前页面的参数 有哪些，等等)也是应用状态的一部分。在很多情况下，我们的业务逻辑与路由状态有很强的关 联关系。比如，最常见的一个列表页中，分页参数、排序参数可能都会在路由中体现，而这些参 数的改变必然导致列表中的数据发生变化。因此，当我们采用 Redux 架构时，所有的应用状态必须放在一个单一的 store 中管理，路由 状态也不例外。而这就是 React Router Redux 为我们实现的主要功能。
对 Redux 的 store 进行一些增强，以便分发的 action 能被正确识别
import { browserHistory } from ‘react-router‘;
import { routerMiddleware } from ‘react-router-redux‘;
const middleware = routerMiddleware(browserHistory);
const store = createStore(
reducers,
applyMiddleware(middleware)
);
可以用 store.dispatch 来分发一个路由变动的 action 了:
import { push } from ‘react-router-redux‘;
// 切换路由到 /home store.dispatch(push(‘/home‘));
高阶 reducer 主要通过下面 3 点来增强reducer:高阶 reducer 就是指将 reducer 作为参数或者返回值的函数
? 能够处理额外的 action;
? 能够维护更多的 state;
? 将不能处理的 action 委托给原始 reducer 处理。
createStore 的函数签名:
export default function createStore(reducer, initialState, enhancer) { // ...}
createStore 中的第二个参数不仅扮演着 initialState 的角色。如 果我们传入的第二个参数是函数类型，那么 createStore 会认为你忽略了 initialState 而传入了 一个 enhancer。
如果我们传入了一个有效的enhancer，createStore会返回enhancer(createStore)(reducer, initialState) 的调用结果，这是常见的高阶函数调用方法。在这个调用中，enhancer 接受createStore 作为参数，
对 createStore 的能力进行增强，并返回增强后的 createStore。然后再 将 reducer 和 initialState 作为参数传给增强后的 createStore，最终得到生成的 store。
var currentReducer = reducer
var currentState = initialState
var listeners = []
var isDispatching = false
function getState() {
return currentState//getState 方法用于返回当前状态。
}
dispatch---将当前的状态和 action 传给当前的reducer，用于生成最新的 state。在得到新的状态后，依次调用所有的监听器，通知状态的变更。
需要注意的是，我们在通知监听器变更发生时，并没有将最新的状态作为参数传递给这些监听器。这是因为在监听器中，我们可以直接调用 store.getState() 方法拿到最新的状态。
React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。
connect 函数本身返回名为 wrapWithConnect 的函数，而这个函数才是真正用来 装饰 React 组件的。而在我们装饰一个 React 组件时，
其实就是把组件在 Connect 类的 render 方 法中进行渲染，并获取 connect 中传入的各种额外数据。
connect 函数如果传入mapStateToProps,则会store.subscribe()监听state变化
Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。它的原理是React组件的context属性
class Provider extends Component {
getChildContext() {
return {store: this.props.store}
}
render() {
return this.props.children;
}
}
子组件就可以从context拿到store
标签：sub default 函数 ini push 结构 渲染 ons scribe
原文地址：https://www.cnblogs.com/diyigechengxu/p/10895135.html
