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
