redux 和 react-redux 使用笔记

redux就是一个数据管理工具

• action ---数据层，公共约定
• reducer --根据dispatch发布更新处理action数据，建议返回新state。
• store ---1 dispatch发布事件，2getState()获取stage，3subscribe监听触发 事件 参考例子 git>https://github.com/mazhenxiao/ProcessTimeLine.git

redux 简单实例

import { createStore } from 'redux';
//action 实例，就是一个数据结构约定，type为该数据识别码
let db = {
 "type":"storeIndex",
 "data":{
     "list":[],
     "show":true
 }
}
//reducer实例，处理触发器触发后如何返回数据。
 let reducer=(state=db,action)=>{
   let {data,type} = action;
    if(type=="storeIndex"){
        return Object.assign({},state,action) //建议返回新对象不直接改初始对象
    }
    return state;
}
//store实例，绑定reduce
let store = createStore(reducer);
//store监听实例，类似dom层addEventlistener
     store.subscribe(() => 
             //store.getState()，返回reducer处理过的数据
             console.log(store.getState()) 
      );
//store.dispatch 发布实例
      store.dispatch({
          "type":"storeIndex",
          "data":{
               "list":[1,2,3,4,5,6],
               "show":true
           }
      })

export default store
复制代码

react-redux，我不苟同但是开发只能随大溜，公共约定。

• 组件
• connect 绑定组件

react-redux 实例

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，也是关键步骤，并且蹩脚。

以高阶函数绑定当前组件

• mapStateToProps: 相当于过滤filter，返回当前项目所需action
• mapDispatchToProps: 在props里注入一个函数，并给函数注入参数dispatch，用来发布更新action，此处实例我自定义了个onLoad在componentDidMount中执行，并将dispatch 提取出来在当前类使用。

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>
    }
}
//过滤当前所需action
const mapStateToProps=(state)=>{ 
    return {storeIndex:state.storeIndex}
}
// 在props里注入自定义函数，为了返回dispatch用来发布action
const mapDispatchToProps=(dispatch)=>{
   return {
        onLoad(callback){ callback(dispatch) }
   }
}

//此处为关键所在
export default connect(mapStateToProps,mapDispatchToProps)(VIewIndex);
复制代码

源码解析

一直吐槽为神马不直接注入到组件，还得去高阶嵌套，于是翻阅react-redux到Provider，发现他只是如实中转了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)
        }
    }

复制代码

既然已经开始处理子元素了，为什么不直接向下逐层添加props，于是我就尝试去添加，发现报错，于是翻开react源码找原因,发现竟然冻结了子元素的props属性Object.freeze(childArray); 所以无法直接逐层注入，否则使用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 事件发布mapDispatchToProps,使用了recux的bindActionCreators 方法绑定函数并传入dispatch作为参数

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