在React中使用Redux
redux将所有数据存储到树中，且树是唯一的。
Redux基本概念
store：存储树结构。state：维护的数据，一般维护成树的结构。reducer：对state进行更新的函数，每个state绑定一个reducer。传入两个参数：当前state和action，返回新state。action：一个普通对象，存储reducer的传入参数，一般描述对state的更新类型。dispatch：传入一个参数action，对整棵state树操作一遍。React-Redux基本概念
Provider组件：用来包裹整个项目，其store属性用来存储redux的store对象。connect(mapStateToProps, mapDispatchToProps)函数：用来将store与组件关联起来。mapStateToProps：每次store中的状态更新后调用一次，用来更新组件中的值。mapDispatchToProps：组件创建时调用一次，用来将store的dispatch函数传入组件。
安装
npm i redux react-redux @reduxjs/toolkit使用
导入包
在定义store的jsx中导入，当然如果是写在一个文件中就没关系
import { configureStore } from "@reduxjs/toolkit";在main.jsx/index.jsx中导入Provider
import { Provider } from 'react-redux';在每一个需要使用到redux全局变量的组件内部导入connect
import { connect } from 'react-redux';定义actions
可以单独写一个文件，中放一个对象的全局变量来存actions
定义reducer
reducer是一个函数，需要传入两个参数，一个是state，另外一个是action
action是一个对象，state是当前存的数据，需要赋一个初值
例如：
const reducer = (state="0", action) => {
switch(action.type) {
}
};state同时可以维护一个对象，此时reducer可以这样写
const reducer = (state={
currentOperand: "",
lastOperand: "",
operation: "",
}, action) => {
switch(action.type) {
default:
return state;
}
};定义store
const store = configureStore({
reducer: reducer
});store 和两个reducer的名称可以任意，自己知道就行。
这里reducer和reducer重名，可以只写一个reducer来表示reducer: reducer
例如：
const store = configureStore({
reducer
});使用store
在main.jsx/index.jsx中将有使用redux的组件用<Provider></Provider>括起来，同时需要给Provider传一个参数store，就是我们定义的store
例如：
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>mapDispatchToProps
将dispatch函数绑定到组件上
mapDispatchToProps函数定义
例如：
const mapDispatchToProps = {
add_digit: digit => {
return {
type: ACTIONS.ADD_DIGIT,
digit: digit,
}
}
}使用connect组件绑定
例如：
export default connect(null, mapDispatchToProps)(DigitButton);之后就可以通过 this.props.add_digit 来使用add_digit函数了
mapStateToProps
将state数据绑定到组件上
mapStateToProps函数定义
例如：
const mapStateToProps = (state, props) => {
return {
currentOperand: state.currentOperand,
lastOperand: state.lastOperand,
operation: state.operation,
}
}使用connect组件绑定
例如
export default connect(mapStateToProps)(Calculator);之后就可以通过 this.props. ...来访问state中的数据了