四十七----redux

一、redux

redux?于状态集中存储，状态的更新必须是?种可预测的?式更新。严格的单向数据流是Redux架构的设计核?。 这意味着应?中所有的数据都遵循相同的?命周期，这样可以让应?变得更加可预测且容易理解。
什么时候用redux？

• 多交互，多数据源等场景
• 某个组件的状态，需要共享
• 某个组件状态需要在任何地?都可以拿到
• ?个组件需要改变全局状态
• ?个组件需要改变另?个组件的状态
  Redux之类的状态管 理库充当了?个应?的业务模型层，并不会受限于如React之类的View层。
  1、redux三大原则
• 单?数据源整个应?的state 被储存在?棵object tree中，并且这个object tree只存在于唯??个 store中。这让同构应?开发变得?常容易。来?服务端的state可以在?需编写更多代码的情况下被 序列化并注?到客户端中。由于是单?的 state tree，调试也变得?常容易。在开发中，你可以把应 ?的state保存在本地，从?加快开发速度。此外，受益于单?的state tree ，以前难以实现的如“撤 销/重做”这类功能也变得轻?易举。
• State是只读的唯?改变state的?法就是触发action，action 是?个?于描述已发?事件的普通对 象。 这样确保了视图和?络请求都不能直接修改state，相反它们只能表达想要修改的意图。因为所 有的修改都被集中化处理，且严格按照?个接?个的顺序执?，因此不?担?竞争条件（race condition）的出现。 action 就是普通对象?已，因此它们可以被?志打印、序列化、储存、后期调 试或测试时回放出来。
• 使?纯函数来执?修改为了描述action 如何改变state tree ，你需要编写reducers。 Reducer只是? 些纯函数，它接收先前的state和action，并返回新的state。reducer主要是为了约束修改行为的，不让随便修改。刚开始你可以只有?个reducer，随着 应?变?，你可以把它拆成多个?的reducers，分别独?地操作state tree的不同部分，因为reducer 只是函数，你可以控制它们被调?的顺序，传?附加数据，甚?编写可复?的reducer来处理?些通 ?任务，如分?器。
  
  redux使用示例：

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

createStore:
Redux主要由三部分组成：store、reducer、action。Redux的核?就是 store,它有Redux提供的createStore函数?成，该函数返回3个处理函数getState,dispatch,subscribe。

export default function createStore() {
     
  let state = {
   } // 公共状态  
  const getState = () => {
   } // 存储的数据，状态树；  
  const dispatch = () => {
   } // 分发action，并返回?个action，这是唯?能改变
store中数据的?式；  
  const subscribe = () => {
   } //注册?个监听者，store发?变化的时候被调?。  
  return {
   
    dispatch,
    subscribe,
    getState
 }
}

getState:
getState()实现 对象包含所有数据。如果想得到某个时点的数据，就要对Store?成快照。这种时点的数 据集合，就叫做State。

const getState = () => {
       return state; }

dispatch
dispatch()的实现 直接修改state,state.num+‘a’,如修改state像这种情况，就会导致结果不是我们想要 的，后果可能很严重，如果避免呢？ 如果可以随意修改state，会造成难以复现的bug ，我们需要实现有条件并且是具名修改的store数据，既然要分发action这?要传??个action对象，另外这对象包括我们 要修改的state和要操作的具名actionType,这??type属性值的不同来对state做相应的修改，代码如
下：

const dispatch = (action) => {
         
   switch (action.type) {
       
     case 'ADD':      
       return {
           
         ...state,        
         num: state.num + 1,      
       }    
     case 'MINUS':      
       return {
           
         ...state,        
         num: state.num - 1,      
       }    
     case 'CHANGE_NUM':      
       return {
           
         ...state,        
         num: state.num + action.val,      
       }     // 没有匹配到的?法 就返回默认的值    
     default:      
       return state  
   }  
   }

从代码上看，这?并没有把action独?出来，接着往下看吧。 函数负责?成State。由于整个应?只有? 个 State对象，包含所有数据，对于?型应?来说，这个State必然?分庞?，导致 Reducer函数也?分 庞?。
reducer:
reducer是?个纯函数，它根据action和initState计算出新的state。
强制使?action来描述所有变化带来的好处是可以清晰地知道应?中到底发?了什么。如果?些东?改 变了，就可以知道为什么变。最后，为了把action和state串起来，就有了reducer。 reducer.js:

export default function reducer(action, state) {
     
  //通过传进来的 action.type 让管理者去匹配要做的事情  
  switch (action.type) {
       
    case 'ADD':      
      return {
           
        ...state,        
        num: state.num + 1,      
     }    
    case 'MINUS':      
      return {
           
        ...state,        
        num: state.num - 1,      
     }    
    case 'CHANGE_NUM':      
      return {
           
        ...state,        
        num: state.num + action.val,      
     }     // 没有匹配到的?法 就返回默认的值    
    default:      
      return state  
 }
 }

action:
Action是把数据从应?（译者注：这?之所以不叫view是因为这些数据有可能是服务器响应，?户输? 或其它?view的数据 ）传到 store 的有效载荷。它是 store 数据的唯?来源。?般来说你会通过
store.dispatch() 将 action 传到store。
可以这样理解，Action 描述当前发?的事情。改变State 的唯?办法，就是使? Action。它会运送数据到 Store。

export const ADD = 'ADD'
export const MINUS = 'MINUS'
export const CHANGE_NUM = 'CHANGE_NUM'
/* * Action Creator 来?成action */
export function add(