- react-redux
- 1、安装 yarn add react-redux
- 2、import {Provider, connect} from 'react-redux'
- Provider:组件
- connect:高阶组件
- 3、把所有的组件都嵌入到Provider组件中
- =>Provider组件中只能有一个子元素
- =>需要把之前创建的store容器作为属性传递给Provider组件
- 4、在每一个子组件中，需要做一些特殊处理
- 只要REDUX容器中的状态改变,就会重新获取最新的状态值(把值传递给组件的属性),并且重新渲染组件(REACT-REDUX完成)
store/index.js
import {
createStore
} from 'redux';
import {
cloneDeep
} from '../assets/utils';
let initial = {
supNum: 20,
oppNum: 10
};
const reducer = function reducer(state = initial, action) {
state = cloneDeep(state);
switch (action.type) {
case 'VOTE_SUP':
state.supNum++;
break;
case 'VOTE_OPP':
state.oppNum++;
break;
}
return state;
};
const store = createStore(reducer);
export default store;
\
父
提供Provider 把store放在上下文中
\
\
子
import { useContext, useEffect, useState } from 'react';
import ThemeContext from "./context";
\
\
\
connect
- connect(mapStateToProps, mapDispatchToProps)(Result);
-
- 第一个括号中传递两个函数
-
- mapStateToProps：这个方法完成的事情是把REDUX中管理的状态做为属性传递给组件
-
- mapDispatchToProps：这个方法完成的事情是把REDUX中的DISPATCH作为属性传递给组件
-
-
- =>以后在组件中想要用到REDUX中的状态或者DISPATCH方法,直接通过本身的属性PROPS获取即可(不用自己去操作REDUX)
-
-
- 最后一个括号中传递的是子组件名称
-
- 子组件做的一些特殊处理
-
- 1、导入 react-redux
-
- 2、现在导出的不在是子组件了,而是通过connect返回的高阶组件
-
- 3、之前在子组件中做的一些事情：
-
- ->获取容器中的状态赋值给组件的状态
-
- ->在第一次挂载完成后,向REDUX事件池中追加方法,等任务派发完成,容器状态改变,我们改变子组件状态,完成页面重新的渲染
-
- ...
-
- 这些事情,REACT-REDUX帮我们完成了(不需要自己写)
-
- 4、执行connect做一些配置
import { connect } from 'react-redux';
// 迭代redux中的公共状态信息，并且做为属性传递给Vote组件
const mapStateToProps = state => {
// state:redux容器中的状态
// 返回的对象中包含了：想基于属性传递给Vote的公共状态信息
return {
supNum: state.supNum,
oppNum: state.oppNum
};
};
// 把需要基于disptach派发的任务，基于属性传递给Vote
const mapDispatchToProps = dispatch => {
// dispatch:store.dispatch
return {
support() {
dispatch({
type: "VOTE_SUP"
});
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Vote);
