redux就是一個(gè)數(shù)據(jù)管理工具

• action ---數(shù)據(jù)層，公共約定
• reducer --根據(jù)dispatch發(fā)布更新處理action數(shù)據(jù)，建議返回新state。
• store ---1 dispatch發(fā)布事件，2getState()獲取stage，3subscribe監(jiān)聽(tīng)觸發(fā)
  事件 參考例子 git>https://github.com/mazhenxiao/ProcessTimeLine.git

redux 簡(jiǎn)單實(shí)例

import { createStore } from 'redux';
//action 實(shí)例，就是一個(gè)數(shù)據(jù)結(jié)構(gòu)約定，type為該數(shù)據(jù)識(shí)別碼
let db = {
 "type":"storeIndex",
 "data":{
     "list":[],
     "show":true
 }
}
//reducer實(shí)例，處理觸發(fā)器觸發(fā)后如何返回?cái)?shù)據(jù)。
 let reducer=(state=db,action)=>{
   let {data,type} = action;
    if(type=="storeIndex"){
        return Object.assign({},state,action) //建議返回新對(duì)象不直接改初始對(duì)象
    }
    return state;
}
//store實(shí)例，綁定reduce
let store = createStore(reducer);
//store監(jiān)聽(tīng)實(shí)例，類(lèi)似dom層addEventlistener
     store.subscribe(() => 
             //store.getState()，返回reducer處理過(guò)的數(shù)據(jù)
             console.log(store.getState()) 
      );
//store.dispatch 發(fā)布實(shí)例
      store.dispatch({
          "type":"storeIndex",
          "data":{
               "list":[1,2,3,4,5,6],
               "show":true
           }
      })

export default store

react-redux，我不茍同但是開(kāi)發(fā)只能隨大溜，公共約定。

• <Provider store={store}> 組件
• connect 綁定組件

react-redux 實(shí)例

1、Provider 組件綁定

import React,{Component} from "react";
import {Provider} from "react-redux";
import { BrowserRouter as Router,Route} from 'react-router-dom';
import store from "@js/redux";
import ViewIndex from "@view/index";

class Prouter extends Component{
    render(){
        return <Provider store={store}> //store 參照redux生成
                     <Router>
                         <Route exact path="/" component={ViewIndex} />
                    </Router> 
               </Provider>
    }
}
export default Prouter

2、connect 綁定組件，注入redux的action到組件的props，也是關(guān)鍵步驟，并且蹩腳。

以高階函數(shù)綁定當(dāng)前組件

• mapStateToProps: 相當(dāng)于過(guò)濾filter，返回當(dāng)前項(xiàng)目所需action
• mapDispatchToProps: 在props里注入一個(gè)函數(shù)，并給函數(shù)注入?yún)?shù)dispatch，用來(lái)發(fā)布更新action，此處實(shí)例我自定義了個(gè)onLoad在componentDidMount中執(zhí)行，并將dispatch 提取出來(lái)在當(dāng)前類(lèi)使用。

import React, { Component } from "react";
import controllerIndex from "./controller-index";
import actionIndex from "./action-index";
import {connect} from "react-redux";

class VIewIndex extends Component{
    constructor(props, context){
        super(props, context);
        this.dispatch=null;
    }
 componentDidMount(){
        this.props.onLoad(dispatch=>this.dispatch=dispatch);
    }
 Event_Click_Getstate(event){
         this.dispatch({
            type:"storeIndex",
            data:{
               list:[{
                   startTime:"1234123"
               }]
            }
         }) 
     }
    render(){
        let {storeIndex} = this.props
        return <article onClick={this.Event_Click_Getstate.bind(this)}>
              {
                   storeIndex.data.list.map((da,ind)=>{
                    return <p key={ind}>{da.startTime}</p>
                  })  
              }
        </article>
    }
}
//過(guò)濾當(dāng)前所需action
const mapStateToProps=(state)=>{ 
    return {storeIndex:state.storeIndex}
}
// 在props里注入自定義函數(shù)，為了返回dispatch用來(lái)發(fā)布action
const mapDispatchToProps=(dispatch)=>{
   return {
        onLoad(callback){ callback(dispatch) }
   }
}

//此處為關(guān)鍵所在
export default connect(mapStateToProps,mapDispatchToProps)(VIewIndex);

源碼解析

一直吐槽為神馬不直接注入到組件，還得去高階嵌套，于是翻閱react-redux到Provider，發(fā)現(xiàn)他只是如實(shí)中轉(zhuǎn)了store

 class Provider extends Component {
        getChildContext() {
          return { [storeKey]: this[storeKey], [subscriptionKey]: null }
        }

        constructor(props, context) {
          super(props, context)
          this[storeKey] = props.store;
        }

        render() {
          return Children.only(this.props.children)
        }
    }

既然已經(jīng)開(kāi)始處理子元素了，為什么不直接向下逐層添加props，于是我就嘗試去添加，發(fā)現(xiàn)報(bào)錯(cuò)，于是翻開(kāi)react源碼找原因,發(fā)現(xiàn)竟然凍結(jié)了子元素的props屬性O(shè)bject.freeze(childArray); 所以無(wú)法直接逐層注入，否則使用react.Children.map 方法可以逐一或遞歸注入到props里

 // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  var childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    var childArray = Array(childrenLength);
    for (var i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }

connect 事件發(fā)布mapDispatchToProps,使用了recux的bindActionCreators 方法綁定函數(shù)并傳入dispatch作為參數(shù)

export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
  return (mapDispatchToProps && typeof mapDispatchToProps === 'object')
    ? wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps, dispatch))
    : undefined
}