Redux

1、原理

安装：npm install redux

2、文件格式

.src下建立:

        -redux

              -store.js

              -count_reducer.js

              -count_action.js

3、store.js

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
//引入为Count组件服务的reducer
import personReducer from './reducers/person'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

//汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
	he:countReducer,
	rens:personReducer
})

//暴露store
export default createStore(allReducer,applyMiddleware(thunk))

4、reducers

reducer函数

接到两个参数，分别为：之前的状态(preState)，动作对象(action)

针对传进来的不同的action对象的状态，对之前的prestate状态进行不同的操作

（注意：这里的操作必须是纯函数，不可改变之前的值，不可用unshift push或者random，Date等函数）

5、 actions

 //同步action，就是指action的值为Object类型的一般对象

export const createIncrementAction = data => ({type:INCREMENT,data})

引入thunk：npm install redux-thunk 

 6、组件里面使用store的参数

如果store里面右多个数据比如2里面写的he和rens，那这里获得对应的就是store.he和store.rens

但是这个时候组件不会得到更新，如果要更新还需要使用store.subscribe组件

（一般把订阅写在最外层，这样App里面只要store发生变化都会更新）

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili