react 学习（1） redux、react-redux

前言

　　1.redux是一个js库，她和react没有任何的依赖关系，你可以在vue、react甚至原生的js中使用redux

　　2.react-redux，是一个连接redux和react的库，里面封装了一些api，使你在react中使用redux更加的方便，这块，我们后续在做展开

redux

　　核心概念

　　　　state：数据仓库

　　　　action：数据行动

　　　　reducer：对数据的处理函数

　　运行代码，先使用再学习

import {createStore} from "redux"
//定义state，定义初始数据结构
const state={
    default1:"初始化数据"
}

//定义reduce，用来实现对state的更改。严格来讲，一个reduce只有一个reduce，针对不同的action.type执行的只是reduce中不同的逻辑而已。
const reduce=(state:any,action:any)=>{

    //参数 state：就是下面在createStore(reduce,state)中的state，
    //参数 action: 就是store.dispatch()中的第一个参数

    //可以通过action来控制执行哪段逻辑
    if(action.type==1){
        state.default="type等于1时，修改state数据";
    }
    if(action.type==2){
        state.default="type等于2时，修改state数据";
    }
    return state;//修改state之后，必须返回
}
//定义action，用来描述对数据进行何种操作
const action={
    type:"ACTION_1",
    payload:{
        props1:1
    }
}
//通过redux提供的createStore函数生成一个store
const store=createStore(reduce,state);

//分发一个action
    store.dispatch(action);//可以用我们预先定义的action变量
    store.dispatch({type:"ACTION2",payload:"001"});//也可以直接定义一个对象

export default store;

　　常用的api

　　　　store：store是通过createStore创建的数据对象

　　　　　　getState()：获取最新的state

store.getState();//return 最新的state

　　　　　　dispatch(action)：执行一个action

store.dispatch({type:"ACTION2",payload:{prop1:"001"}});

　　　　　　subscribe(listener)：监听store，当store调用dispatch的时候触发

//添加一个变化监听器。每当 dispatch action 的时候就会执行
store.subscribe(listener)
    //事件处理函数
function listener(){
    console.log("listener",store);
}

　　　　　　replaceReducer(function)：调用dispatch并用指定的函数作为reduce

//相当与store立即调用一次dispatch，并且使用自定义的reduce
store.replaceReducer((state)=>{
    //参数 state是当前store的state对象
    state.default="replaceReducer value";
    return {...state}
})

　　　　createStore：redux提供的创建store对象的方法

import { createStore } from "redux";

//第三个参数 enhancer
const enhancer = (fn) => {
  return fn;
};
//参数：接收三个参数
//1. reduce
//2. 默认的state对象 statedefaule
//3. 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creator。这与 middleware 相似，它也允许你通过复合函数改变 store 接口。
//(2).这个东西比较复杂，本文不作展开，文章末尾会有对enhancer参数详细解析的文章
const store = createStore(reduce, stateDefaul, enhancer);

　　　　combineReducers：reducer过于复杂的时候，可以通过combineReducers来进行拆分，每一个子reducer管理一部分state。

　　　　　　　　　　　　　ps：你不一定要使用combineReducers，这只是redux为了防止新手使用一些错误的规则，而指定的一个分割方案，说实话，个人感觉它并不好用。如果你想的话，你完全可以使用自己的方式去管理庞大的state

import { createStore, combineReducers } from "redux";
//定义state，定义初始数据结构
const stateDefault = {
  default1: "初始化数据",
};
//combineReducers() 接收的参数是一个以state的key名为key，以fuction为value一个对象
const reducerObj = {
  //在这里使用的key（default1）与stateDefault中的key一致，那么val参数的值就为，stateDefault中的default1对应的值
  default1: function (val, action) {
    console.log("action", action, val);
    if (action.type == "action1") {
      return "改变后的数据"; //通过return 来改变state对应key的值，这里将state中的default1属性的值改变为"改变后的数据"
    }
    return val || ""; //每个函数必须要有一个返回值
  },
};
const rootReducer = combineReducers(reducerObj);

const store = createStore(rootReducer, stateDefault);

　　　　appltMiddleware：一个中间件函数，可以是store在每次dispatch的时候，执行定义的方法,方法中可以访问本次dispatch的action参数

import { createStore, applyMiddleware } from "redux";
//定义state，定义初始数据结构
const stateDefault = {
  default1: "初始化数据",
};
const reducer = (state:any,action:any) => {
  return {...state};
};
//执行的函数
function log(obj:any){
  return (next:any)=>(action:any)=>{
    let newAction=next(action)
    console.log('newVal',newAction,action);
    return newAction;
  }
}
//有两种方法使用applyMiddleware,两种方法效果一致
    //第一种
const middStoreCreate = applyMiddleware(log)(createStore);//得到一个store的增加创建函数middStoreCreate
let store = middStoreCreate(reducer, stateDefault);//使用middStoreCreate 创建store
    //第二种 
let store=createStore(reducer,stateDefault,applyMiddleware(log));
store.dispatch({type:"test"})
store.dispatch({type:"test2"})
export default store;

　　　　compose：compose代码其实很简单，他只是把[fn1,fn2,f3]变成fn0(fn1(fn2()))而已，它会返回一个新的函数，新函数中从右到左依次调用函数，并把上一个函数调用的结果传递给下一个函数，作为第一个参数

import { createStore, applyMiddleware,compose } from "redux";
//定义state，定义初始数据结构
const stateDefault = {
  default1: "初始化数据",
};
const reducer = (state:any,action:any) => {
  return {...state};
};

function log0(action:any){
  console.log("log0",action);
  return (next:any)=> (action:any)=>{
    return next(action);
  };
}

function log1(prop:any){
  console.log("log1",prop);
  return (next:any)=> (action:any)=>{
    // return next(action);
  };
}

let store=createStore(reducer,stateDefault,applyMiddleware(compose(log0,log1)));

store.dispatch({type:"test"})
export default store;

react-redux

　　react的作者为了方便在react使用redux，开发了一个react-redux库，在这一篇文章中会介绍在react中使用react-redux连接redux