前言
在使用
redux之前，我们先简单了解一下redux到底是什么？
用过Vue的肯定都知道vuex，vuex是Vue中的全局状态管理工具，主要是用于解决vue各个组件和页面之间的数据共享问题, 可以对共享的数据进行集中式的管理，而且通过插件可以实现数据的持久化。
redux跟vuex类似，最主要的就是用作应用状态的管理，redux用一个单独的常量状态state来保存整个应用的状态，我们可以把它想象成数据库，用来保存项目应用中的公共数据。
那react-redux又是做什么的呢？他是redux的作者为了方便使用转为给react封装的库，它的作用主要就是用于连接和使用redux, 它提供了connect和Provider两个接口，后续我们详细说一下它的使用。
注意: 下述内容都是在React中配置的
Redux具体使用
- 工欲善其事必先利其器，下面我们先安装一下redux的库文件，进入react目录执行如下命令安装：
// 安装redux依赖库，版本可以不用管
cnpm i redux --save
安装后查看一下根目录的package.json文件是否安装上
image.png
- 接下来我们开始配置redux，首先我们在React的src目录中创建一个store文件夹，文件夹中新建一个index.js文件，内容如下所示：
import { createStore } from "redux";
/**
* 定义一个Reducer ，Reducer是一个方法，有两个参数
* state 保存redux中的数据
* action是方法在视图中通过dispatch调用，通过返回值修改state中数据
* */
const Reducer = (state, actions) => {
//判断state是否存在，如果不存在返回默认值
if (!state) {
return {
counter: 10,
color: "#FF0000"
}
}
//下面可以通过switch语句或者if语句判断，
//dispatch提交的type值，也可以接受payload附加参数
//我们以switch为例，type值尽量大写
switch (actions.type) {
case "PLUS":
return {
...state,
counter: state.counter + 1
}
break;
case "INCR":
return {
...state,
counter: state.counter + 1
}
break;
default:
return state;
break;
}
}
//创建存储对象并且抛出对象
const store = createStore(Reducer);
export default store;
- 在src中的index.js入口文件中，导入刚才创建的redux配置文件，创建一个父组件，两个子组件，测试一下redux的使用，当然也可以用路由，效果会更好。
import React, { Component } from 'react';
import ReactDOM from "react-dom/client";
import "./index.scss";
import store from "./store";//redux中的数据获取对象信息
const root = ReactDOM.createRoot(document.querySelector("#root"));
class App extends Component {
//生命周期函数中调用方法监听数据的变化
componentDidMount() {
//监听redux中数据的变化，更新视图
store.subscribe(() => {
console.log("监听数据的变化更新视图")
this.setState({})//简单的设置setState让render方法更新
})
}
render() {
return (
<div className='app'>
<Left />
<Right/>
</div>
)
}
}
//拆分左侧的小组件
function Left() {
//通过getState获取redux中的state数据
const { counter, color } = store.getState();
return (
<div className="left">
<h3>counter是: {counter}</h3>
{/* dispatch调用redux中action，根据type判断，去修改state中的值 */}
<button onClick={() => store.dispatch({ type: "PLUS" })}>counter++</button>
<button onClick={() => store.dispatch({ type: "CHANGE_COLOR" })}>修改颜色</button>
</div>
)
}
//拆分为右侧小组件
function Right() {
//通过getState获取redux中的state数据
const { counter, color } = store.getState();
return (
<div className="right">
<h2 style={{color:color}}>Counter:{counter}</h2>
</div>
)
}
root.render(
<App />
)
上面Left组件和Right是两个兄弟组件，他们的父组件是App，使用rudex后，当在Left组件中修改counter数量或者颜色，Right组件都会同步变化，这就实现数据在不同组件之间的共享效果，参考如下效果
aaa.gif
- 我们知道vuex中有一个modules核心模块，可以把vuex分模块处理，我们也可以把redux中的Reducer函数拆分，不同函数负责不同的属性模块，然后再把它们通过combineReducers合成一个大的模块即可，我们改造一下store/index.js文件
- 首先我们导入combineReducers函数
- store创建两个文件cart,user,分别定义拆分的Reducer函数
- 通过combineReducers合并数据，调用时跟上函数模块名字即可
cart.js文件
const cart = (state, actions) => {
//判断state是否存在，如果不存在返回默认值
if (!state) {
return {
counter: 10,
color: "#FF0000"
}
}
//下面可以通过switch语句或者if语句判断，
//dispatch提交的type值，也可以接受payload附加参数
//我们以switch为例，type值尽量大写
switch (actions.type) {
case "PLUS":
return {
...state,
counter: state.counter + 1
}
break;
case "CHANGE_COLOR":
return {
...state,
color:"#0088dd"
}
break;
default:
return state;
break;
}
}
export default cart;
user.js文件
const user = (state, actions) => {
//判断state是否存在，如果不存在返回默认值
if (!state) {
return {
name: "张三"
}
}
if(actions.type==="SET_NAME"){
return {
name:"李四"
}
}
return state;
}
export default user;
store/index.js文件修改如下所示
import { createStore,combineReducers } from "redux";
/**
* 定义一个Reducer ，Reducer是一个方法，有两个参数
* state 保存redux中的数据
* action是方法在视图中通过dispatch调用，通过返回值修改state中数据
* */
import cart from "./cart";
import user from "./user"
//可以合并多个模块
const Reducer = combineReducers({
cart,
user,
})
//创建存储对象并且抛出对象
const store = createStore(Reducer);
export default store;
最后index.js中文件做了如下改动
//拆分左侧的小组件
function Left() {
//通过getState获取redux中的state数据
const { counter, color } = store.getState().cart;
return (
<div className="left">
<h3>counter是: {counter}</h3>
{/* dispatch调用redux中action，根据type判断，去修改state中的值 */}
<button onClick={() => store.dispatch({ type: "PLUS" })}>counter++</button>
<button onClick={() => store.dispatch({ type: "SET_NAME"})}>修改名字</button>
</div>
)
}
//拆分为右侧小组件
function Right() {
//通过getState获取redux中的state数据
const { counter, color } = store.getState().cart;
const {name} = store.getState().user;
return (
<div className="right">
<h2 style={{ color: color }}>Counter:{counter}</h2>
{name}
</div>
)
}
简单总结redux的执行流程
View视图中通过dispatch触发action修改state中的数据，state中的数据修改后更新View视图中去，在class组件中，我们通过store中Api方法subscribe() 监听state数据的变化，从而更新react组件重新渲染组件。
