06-React组件 & Redux & React-Redux

2023-12-13 13:40:20

React组件化(以Ant-Design为例)

组件化编程,只需要去安装好对应的组件,然后通过各式各样的组件引入,实现快速开发
我们这里学习的是 Ant-design (应该是这样),它有很多的组件供我们使用
在这里插入图片描述
引入各种组件,可以方便开发,省着自己去二次封装组件,同时也更好看了

在这里插入图片描述

快速起步

安装antd组件库

npm install antd

随便一个组件里面引入

import { Button } from "antd";

class App extends React.Component {
  render() {
	<div>
            <Flex gap="small" wrap="wrap">
              <Button type="primary">Primary Button</Button>
              <Button>Default Button</Button>
              <Button type="dashed">Dashed Button</Button>
              <Button type="text">Text Button</Button>
              <Button type="link">Link Button</Button>
            </Flex>
     </div>
  }
}
export default App;

运行一下
在这里插入图片描述

大概就是这么个东西,一定学会看官方文档,尤其这种组件类的,不看文档就啥也做不了
AntDesign官方文档

其他UI,但是是国外的
material-ui

大概就是这些东西,还有自定义主题的一些方法,因为每个版本的官方修改方式都不一样,所以建议现用现查

Redux

非必须学习的项目,但是如果项目里用了就得学

Redux简介

1.redux是一个专门用于做状态管理的JS库(不是react插件库,只是名字像)。
2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3.作用: 集中式管理react应用中多个组件共享的状态。

也类似于VueX

什么时候需要用Redux

首先,Redux是在有很多很多组件的情况下,才有可能需要用到Redux的,如果是单个组件,就自然没有很复杂的传值需求了

Redux 适用于多交互、多数据源的场景。简单理解就是复杂

从组件角度去考虑的话,当我们有以下的应用场景时,我们可以尝试采用 Redux 来实现

  1. 某个组件的状态需要共享时
  2. 一个组件需要改变其他组件的状态时
  3. 一个组件需要改变全局的状态时

除此之外,还有很多情况都需要使用 Redux 来实现(还没有学 hook,或许还有更好的方法)

在这里插入图片描述

Redux工作流程

  • store

store 是 Redux 的核心,可以理解为是 Redux 的数据流向指挥,我们可以将任何我们想要存放的数据放在 store 中,在我们需要使用这些数据时,我们可以从中取出相应的数据。因此我们需要先创建一个 store ,在 Redux 中可以使用 createStore API 来创建一个 store

store是无法直接进行操作的,需要借助Redux进行操作
store是一个调度者,store是指挥者,不干活。需要任何操作,或者动作,都会去分发走,找到对应的担当来做。(如果越过了store,action直接去找reducers,就有点类似去餐厅点餐,不找前台点餐,直奔后厨要吃的😂)

  • action

actionstore 中唯一的数据来源,一般来说,我们会通过调用 store.dispatch 将 action 分发到 store

我们需要传递的 action 是一个对象,它必须要有一个 type 值(如果是初始化,就传@@init@@代表要初始化),data值在第一次传参的时候可以为undefined,然后由Reducers来初始化赋值。

  • reducers

在 Reducers 中,我们需要指定状态的操作类型(type),要做怎样的数据更新,因此这个类型是必要的。

因为Reducers中会有很多具体处理的Reducer,所以这里Reducers代表很多处理Reducer的集合。

reducer 会根据 action 的指示,对 state 进行对应的操作,然后返回操作后的 state

另外,Reducer可以加工状态,加工的前提是有上一次的状态值,如果没有状态值就要初始化一个状态值。有了状态值之后就可以进行下一步的加工。

在这里插入图片描述

手写一个Redux精简版

这里只是一个简化,忽略了很多东西(比如Creators创建Action的过程),侧重于展示store,reducer之间的关系
store.js文件:
创建一个store的js,导出供外界使用

import { createStore } from "redux";
//引入为store服务的Reducer
import countReducer from "./count_reducer";
//手动创建一个store
const store = createStore(countReducer);

//全局只暴露这一个store对象
export default store;

count_reducer.js文件:
我们创建专门计数的reducer(简单来说就是专门负责处理某件事的function),这里取名叫作count_reducer

所有的action通过dispatch传进去之后,类型,数据都托管于store这个中心,调用的组件只需要把 type,data传进去,剩下的只需要等着从store中获取结果即可!

/*
    作为一个reducer应该有如下功能
    Store传来(previousState,action),Reducer接收到参数做出判断,
    previousState判断是否是空,是空就得初始化。非空就按照action进行下一步操作

    action处理完之后,把处理好的newState(previousState处理之后的版本),返回给store,等待Store返回给React组件

    所以以上的这些操作,只能用function。所以Reducers里的Reducer本质就是函数

	动作完成后,将数据暂存给store,等待后续组件获取值即可
*/

export default function countReducer(previousState, action) {
    // 从Action对象里传来的action对象,里面包含type和data,所以我们需要解构出来。等待后续处理
    const { type, data } = action;
    if (previousState === undefined) {
        // 如果之前的状态是空的,就初始化之后还给store中心
        // 或者可以这么写,给参数给默认值
        // function countReducer(previousState=0, action) {

        return 0;
    }

    // 判断传入功能类型
    switch (type) {
        case "add":
            //这里用原来的值+新传入的值,得到新值
            return previousState + data * 1;
        case "sub":
            //这里用原来的值-新传入的值,得到新值
            return previousState - data * 1;
        // 提一嘴,这里都是return,所以不用break
        default:
            return previousState;
    }
}

Count.jsx文件:
调用方组件:

import React, { Component } from "react";
// 获取store,用于获取store中的状态
import store from "../redux/store";

export default class Count extends Component {
    // 之前准备的state,存储值count 都不用存在了,因为已经托管给store了
    // 但是,自己组件内部的值其实是还需要放在state的,因为store只需要托管复杂共享的情况
    state = {
        // 这个实际上就不要了,因为保存在state中
        // countNumber: "",
        // 但是比如car这个属性,只有自己用,就没必要兜一圈放redux中了,放自己组件里就挺好
        car: "威朗Pro GS",
    };

    add = () => {
        const { value } = this.count;
        // store是分发中心,告诉reducer要干的事情,以及传入的数值
        // 我们只需要将 type(要做的事情),value(原始值) 告诉store 。让store去找对应的reducer操作即可
        // 对应的reducer拿到数值,做出判断以及相应动作处理数据,处理好之后return值在store中等待组件get
        // 但注意,仅仅调用dispatch是不够的,因为redux是第三方js。无法触发页面刷新
        // 所以需要检测Redux里状态改变时,就去调用render。这里用到了订阅subscribe
        // 你都不用自己再解构接收值,所有的函数处理,值存储,都在redux中做好了,只需要我们从store中get结果即可
        // 获取store的地方,因为被监听所以自动刷新了,触发render
        store.dispatch({ type: "add", data: value });
        store.subscribe(() => {
            // 只要Redux里状态改变时,就去调用render。这里用到了订阅subscribe。手动触发一下就行
            // 借助setState,传个空值进去就可以触发render重新渲染
            // 当然,我们也可以在index.js的根标签监听这个。监听整个App组件,利用diffing算法全部更新,避免性能下降
            this.setState({});
        });
    };
    sub = () => {
        const { value } = this.count;
        store.dispatch({ type: "sub", data: value });
        store.subscribe(() => {
            // 手动监听,触发页面重新渲染
            this.setState({});
        });
    };


    render() {
        console.log(store);
        return (
            <div>
                当前结果<h1>{store.getState()}</h1>
                选择内容
                <select ref={(c) => (this.count = c)}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                <button onClick={this.add}>+</button>
                <button onClick={this.sub}>-</button>
            </div>
        );
    }
}

总结一下精简案例

(1).去除Count组件自身的状态
(2).src下建立:
				-redux
					-store.js
					-count_reducer.js

(3).store.js:
			1).引入redux中的createStore函数,创建一个store
			2).createStore调用时要传入一个为其服务的reducer
			3).记得暴露store对象

(4).count_reducer.js:
			1).reducer的本质是一个函数,接收:preState,action,返回加工后的状态
			2).reducer有两个作用:初始化状态,加工状态
			3).reducer被第一次调用时,是store自动触发的,
							传递的preState是undefined,
							传递的action是:{type:'@@REDUX/INIT_a.2.b.4}( _a.2.b.4是随机数,为了避免和自己写的type名有重合)

(5).在index.js中监测store中状态的改变,一旦发生改变重新渲染<App/>
		备注:redux只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己写。

完整版Redux

上面的案例没有写action的创建,所以这里补齐就成为了完整版。
该文件专门为Count组件需要用的Reducer去生成action对象,封装好type,这样在调用组件传一个data进来就可以了

新增文件:
	1.count_action.js 专门用于创建action对象
	2.constant.js 放置容易写错的type值

store.js文件:
创建一个store的js,导出供外界使用。这个和上面的没区别,这里不赘述了

count_action.js文件:

/*
    该文件专门为Count需要用的Reducer去生成action对象,封装好type,这样在调用组件传一个data进来就可以了
*/
import { ADD } from "./constant.js";

// 注意,这里有个坑,就是我希望在这里返回对象的箭头函数,最外侧不能是花括号
// (data) => { type: ADD, data };  如果是这样,会把 type: ADD, data 这部分识别为函数体,就没法返回对象了
// 所以我们用括号给括起来,就自动返回对象了
export const createAddAction = (data) => ({ type: ADD, data });
// 这两种写法等价
export function createIncrementAction(data) {
     // 要返回Action对象(返回type和data数据)
     return { type: ADD, data };
}

count_reducer.js文件:
本案例中,主要是引入常量来表示Type,避免了容易拼错的问题

import { ADD, SUB } from "./constant.js";

export default function countReducer(previousState, action) {
    // 从Action对象里传来的action对象,里面包含type和data,所以我们需要解构出来。等待后续处理
    const { type, data } = action;
    if (previousState === undefined) {
        // 如果之前的状态是空的,就初始化之后还给store中心
        // 或者可以这么写,给参数给默认值
        // function countReducer(previousState=0, action) {

        return 0;
    }

    // 判断传入功能类型
    switch (type) {
        case ADD:
            //这里用原来的值+新传入的值,得到新值
            return previousState + data * 1;
        case SUB:
            //这里用原来的值-新传入的值,得到新值
            return previousState - data * 1;
        // 提一嘴,这里都是return,所以不用break
        default:
            return previousState;
    }
}

Count.jsx文件:
调用方组件,这里主要强调变化的部分,省略了部分代码:

import React, { Component } from "react";
// 传入action函数,我们只需要传入data即可
import { createAddAction } from "../redux/count_action";
// 获取store,用于获取store中的状态
import store from "../redux/store";

export default class Count extends Component {

	...省略
	
    add = () => {
        const { value } = this.count;
        // 引入了action后,就不需要我们手动定义type了,在action中已经做好定义了,我们只需要传入data即可
        // store.dispatch({ type: "add", data: value });

        // 引入,并且直接用count_action所封装好的函数来传入参数
        store.dispatch(createAddAction(value * 1));

        store.subscribe(() => {
            // 监听,store值变化重新render
            this.setState({});
        });
    };
    sub = () => {
            省略...
    };
    render() {
        return (
            省略...
        );
    }
}

异步action版

action有两种类型,根据返回值类型来区分

  • action的值为Object,则为同步action(store可以直接接收处理)
//返回一个对象
export const createSubAction = (data) => ({ type: SUB, data });
  • action的值为function,则为异步action(只有function才能开启异步任务,并且,store不可以直接接收处理异步action,需要通过中间件处理后才能接收
export const createAddAsync = (data,time) => {
    return ()=>{
        setTimeout(() => {
            ...省略
        }, time);
    }
};

之前的异步add方法,其本质还是在组件里写的,可以看到,等待的异步过程没有在Redux里面写

addAsync = () => {
    const { value } = this.count;
    setTimeout(() => {
        store.dispatch(createAddAction(value * 1));
    }, 5000);
};

我们现在要把异步等待的操作,放在Redux的Action Creators里面,不放在组件里面等待了
调用方组件Count:

addAsync = () => {
    const { value } = this.count;
    //常规调用,看似没问题
    store.dispatch(createAddAsync(value, 5000));
    store.subscribe(() => {
	    // 手动监听,触发页面重新渲染(也可以去监听App组件)
	    this.setState({});
    });
};

action组件:

export const createAddAsync = (data, time) => {
    return () => {
        // 这里其实只套了一个定时操作
        setTimeout(() => {
            // 通过store调用已经定义好的增加action,省着我们再写了
            store.dispatch(createAddAction(data));
        }, time);
    };
};

但实际上这是有问题的,运行代码会报错

翻译过来就是,store不直接接收action的值为function(异步action)。想要接收必须去用一个中间件,让store允许接收函数
在这里插入图片描述
引入中间件:npm install redux-thunk需要我们安装一下
引入完成之后,就需要在store.js里面修改一下,用于支持异步action。做的这一切,只是为了让store可以接收异步action返回的函数
store.js

//引入store创建,以及中间件
import { createStore, applyMiddleware } from "redux";
//引入为store服务的Reducer
import countReducer from "./count_reducer";
// 引入thunk给applyMiddleware中间件用
import thunk from "redux-thunk";
//手动创建一个store,传入applyMiddleware(thunk) 
const store = createStore(countReducer, applyMiddleware(thunk));

//全局只暴露这一个store对象
export default store;

此时我们再看修改后的组件:

调用方组件Count(没有变化):

addAsync = () => {
    const { value } = this.count;
    store.dispatch(createAddAsync(value, 5000));
    store.subscribe(() => {
        // 手动监听,触发页面重新渲染(也可以去监听App组件)
        this.setState({});
    });
};

action组件:

// 异步action,就是只action的值为函数,在异步action中,一般都会调用同步action,异步action不是必须要用的
export const createAddAsync = (data, time) => {
    return () => {
        // 这里其实只套了一个定时操作
        setTimeout(() => {
            // 调用已经定义好的增加action
            store.dispatch(createAddAction(data));
            console.log(data, time);
        }, time);
    };
    // 不用store调用dispatch也可以,因为dispatch会自动传进来一个,这两种完全等价
    // return (dispatch) => {
    //     // 这里其实只套了一个定时操作
    //     setTimeout(() => {
    //         // 调用已经定义好的增加action
    //         dispatch(createAddAction(data));
    //         console.log(data, time);
    //     }, time);
    // };
};

此时再测试,不再报错。

配置完毕之后的store
如果我们给store传入一个普通类型的Object action,store就会直接找Reducer去做处理
如果给store传入一个异步类型的Function action,这个函数store就会帮你调用

总结下来,虽然异步的action调用的时候返回值是函数,但是最后一般都会调用同步action,来完成数据的操作

React18版本的store监听刷新

之前给的store subscribe监听刷新,是React17版本的,React18版本的可以参考这个
ReactDOM.render is no longer supported in React 18.
改造之后的index.js

// 引入React核心库
import React from "react";
import { createRoot } from "react-dom/client";
// 引入App标签
import App from "./App";
import store from "./redux/store";

// React18版本监听并刷新页面
const root = createRoot(document.getElementById("root"));
root.render(<App />);

//监测redux中状态的改变,如redux的状态发生了改变,那么重新渲染App组件
store.subscribe(() => {
  root.render(<App />);
});

总结异步action

 (1).明确:延迟的动作不想交给组件自身,想交给action
 (2).何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回。
 (3).具体编码:
 			1).npm install redux-thunk,并配置在store中
 			2).创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务。
 			3).异步任务有结果后,分发一个同步的action去真正操作数据。
 (4).备注:异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action。

React-Redux基础

安装:npm install react-redux
安装不上去就用这个:npm install react-redux --legacy-peer-deps
还不行就把package.json里面的这俩都删了,在安装React-Redux

"redux": "^4.2.1",
"redux-thunk": "^2.4.2",

引言

React-Redux是React专门出的Redux,属于官方出品
宗旨在于将UI与redux分隔开,所有的操作都要经由容器组件
在这里插入图片描述

引言-简化版连接UI组件与容器组件


前置知识

redux里的唯一的api:connect;

使用的时候,一般都是这么用connect()();

简单来说,得分开看connect()是一个返回一个函数的方法
connect()()是在connect()返回函数后,继续再次调用这个返回的函数
就有点类似下面这个,调用connect()(),最后会触发a里的输出OK
当然,a()也可以返回一个返回值

connect(){
	return a();
}

a(){
	console.log("OK")
}

首先明确文件应该放在哪个包下面:
UI组件:components包下
容器组件:containers包下

且UI组件的里面,不能有任何关于Redux相关的API(store,actionCreator,dispatch… 这些API都不能引入了)。只能有UI组件以及UI组件动作相关的东西。在components里创建countTemplate.jsx
countTemplate.jsx

import React, { Component } from "react";

export default class CountTemplate extends Component {
    // 纯UI组件+页面操作
    //加法
    increment = () => {
        // 这个是获取页面的选择值
        const { value } = this.selectNumber;
    };
    ...
    //异步加
    incrementAsync = () => {
        const { value } = this.selectNumber;
    };

    render() {
        //console.log('UI组件接收到的props是',this.props);
        return (
            <div>
                <h1>当前求和为:{"???"}</h1>
                <select ref={(c) => (this.selectNumber = c)}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>
                    当前求和为奇数再加
                </button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        );
    }
}

简化版里面,容器组件更像是一个桥梁,负责连接 UI组件与Redux 的交互。所以在Container里面,创建一个count.jsx

在这个桥梁(count.jsx)里,我们可以导入UI组件等待连接,(理论上应该导入Redux的Store,就完成了,但是不行,store必须从App里面通过props传进来 )

我在container容器里面引入了store仍然报找不到的错(这里是错误示范)

//引入Count的UI组件
import CountTemplate from "../components/CountTemplate";
// 引入store
import { store } from "../../redux/store";
// 引入connect的API
import { connect } from "reat-redux";

// 导入connect,并且连接UI
export default connect()(CountTemplate);

我已经引进来store了,但是还是提示找不到store,这里不是因为我没有在connect里连接,而是不允许这种用法。只能在调用Container组件的组件里传值用props进去。
在这里插入图片描述

注意:react-redux不允许直接引入,只能从Container组件被调用的那一级组件里传进来
App组件(调用Container的组件)。这样就不报错了

import React from "react";
import Count from "./pages/Count";
import "./App.css";
import store from "./redux/store";
class App extends React.Component {
    render() {
        return (
            <div>
                {/* 只能用props传递store进入Container组件 */}
                <Count store={store}></Count>
            </div>
        );
    }
}
export default App;

省略store.subscribe

首先就是之前的store.subscribe,之前我们在Redux里面,由于组件和Redux之间没有直接监听更新的手段。所以这里需要手动去监听渲染组件

// 引入React核心库
import React from "react";
import { createRoot } from "react-dom/client";
// 引入App标签
import App from "./App";
import store from "./redux/store";

// React18版本监听并刷新页面
const root = createRoot(document.getElementById("root"));
root.render(<App />);

//监测redux中状态的改变,如redux的状态发生了改变,那么重新渲染App组件
store.subscribe(() => {
  root.render(<App />);
});

而在React-Redux中,connect就自动集成了监听并更新的功能,所以我们不必再手动监听。删掉即可,测试完美替换,不影响功能。

// 引入React核心库
import React from "react";
import { createRoot } from "react-dom/client";
// 引入App标签
import App from "./App";

// React18版本监听并刷新页面
const root = createRoot(document.getElementById("root"));
root.render(<App />);

React-Redux的基本使用

上面说到,Container想接受到store,只能通过props形式传递,但是Container本身,并不是标签形式的,所以就用不了props来传递数据。要想把Container接收到的props传给UI组件,就只能用connect的API,通过函数返回对象的形式来传递


首先看这个Container组件,是没有办法去写子组件传值的
也就是<CountTemplate key1={value1} ...>这种是没有机会写的
所以我们只能依靠connect传值

//引入Count的UI组件
import CountTemplate from "../../components/Count/CountTemplate";
// 引入connect的API
import { connect } from "react-redux";

// 使用connect()()创建并暴露一个Count的容器组件
export default connect()(CountTemplate);

props是key-value的形式,所以我们要来模仿这种形式
这里就采用了对象的形式,来模拟这种key-value
{key:value}或者{key:()=>{函数体}} 也就是说,props的形式都可以模拟
修改一下Container的Count组件

//引入Count的UI组件
import CountTemplatefrom "../../components/Count/CountTemplate";
// 引入connect的API
import { connect } from "react-redux";

function a() {
    // a函数返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value,这个value是状态
    return { key1: "value1" };
}

function b() {
    // a函数返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value,这个value是函数
    return {
        key2: () => {
            console.log("OK");
        },
    };
}
// 使用connect建并暴露一个Count的容器组件,传a,b函数的返回值给UI组件
export default connect(a, b)(CountTemplate);

UI组件获取参数:
在UI组件打印一下:console.log("UI组件接收到的props是", this.props);

在这里插入图片描述

所以想获取就更简单了,直接this.props.key即可

注意,a传值的时候有点小坑,我们应该专注于状态的传递。所以优化一下

function a(state) {
	// 这里直接传state即可,这个state是从App传过来的
	// 所有的状态就直接用这个state给传过去了(注意是所有的state)
	// key1是自定义的,不设限
    return { key1: state };
}

同样,b里如果要调用dispatch函数,本应该import store

import store from "../../redux/store";
import { createAddAction } from "../../redux/count_action";

function b() {
    // 返回值返回value为函数的对象
    // add是自定义的,不设限,仅代表当前返回值的函数
    return {
        add: (number) => store.dispatch(createAddAction(number)),
    };
}

但是由于Container里面不应该引入store,并且dispatch可以自动传入,所以就不用通过导入store来调用dispatch了。和上面的state一样,自动传入dispatch
改造后:

//这个是自定义的action函数,不是redux的函数
import { createAddAction } from "../../redux/count_action";

function b(dispatch) {
    // 自动传入了dispatch
    return {
    // 不再需要用store调用dispatch  
    // 这种就可以简写了add: (number) => store.dispatch(createAddAction(number)),
        add: (number) => dispatch(createAddAction(number)),
    };
}

案例总结

demo结构,重点主要集中在Container上
在这里插入图片描述

这四个文件照之前的没有任何变化,所以不赘述了
在这里插入图片描述
UI组件 CountTemplate.jsx

import React, { Component } from "react";

export default class Count extends Component {
  add = () => {
  	// add操作
    const { value } = this.selectNumber;
    // 找到传入函数并传参
    this.props.add(value * 1);
  };
  addNotOdd = () => {
    // 奇数add操作
    const { value } = this.selectNumber;
    if (this.props.key1 % 2 !== 0) {
      this.props.add(value * 1);
    }
  };
  addAsync = () => {
  	// 异步add操作
    const { value } = this.selectNumber;
    setTimeout(() => {
      this.props.add(value * 1);
    }, 500);
  };

  render() {
    return (
      <div>
        <div>当前求和:{this.props.key1}</div>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <div>
          <button onClick={this.add}>add</button>
          <button onClick={this.sub}>sub</button>
          <button onClick={this.addNotOdd}>addNotOdd</button>
          <button onClick={this.addAsync}>addAsync</button>
        </div>
      </div>
    );
  }
}

Container组件 Countainer.jsx

import { connect } from "react-redux";
import CountTemplatefrom "../../components/count/CountTemplate";
import { add } from "../../redux/count_action";

function a(store) {
  return { key1: store };
}

function b(dispatch) {
  // 允许传递多个函数
  return {
    // add操作的函数
    add: (data) => dispatch(add(data)),
    // sub操作的函数
    sub: (data) => dispatch(sub(data)),
  };
}

// 传入func a(负责state传递)  func b(负责函数动作传递)
// 最后桥梁连接CountTemplate组件
export default connect(a, b)(CountTemplate);

App.jsx

import React from "react";
import Container from "./pages/container/Container";
import store from "./redux/store";
import { BrowserRouter } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
      {/* 在App向Container传递store(props形式) */}
        <Container store={store}></Container>
      </BrowserRouter>
    );
  }
}
export default App;

index.js

// 引入React核心库
import React from "react";
import { createRoot } from "react-dom/client";
// 引入App标签
import App from "./App";
import store from "./redux/store";

// React18版本监听并刷新页面
const root = createRoot(document.getElementById("root"));
root.render(<App />);

//监测redux中状态的改变,如redux的状态发生了改变,那么重新渲染App组件
store.subscribe(() => {
  root.render(<App />);
});

以上就可以完成计算组件

在这里插入图片描述

Container命名优化(引出规定的函数名)

传值的函数可以看到,实际上,所有的state和function的参数传递,通过一次就可以完全传递完。
所以react-redux里面就提供好了函数名专门传递state和function,就不需要我们再去单独定义了。更加规范了。

// 函数命名不规范
function a(store) {
  return { key1: store };
}
// 函数命名不规范
function b(dispatch) {
  // 允许传递多个函数
  return {
    // add操作的函数
    add: (data) => dispatch(add(data)),
    // sub操作的函数
    sub: (data) => dispatch(sub(data)),
  };
}

// 使用connect建并暴露一个Count的容器组件,传a,b函数的返回值给UI组件
export default connect(a, b)(CountUI);

connect 方法是一个连接器,用于连接容器组件和 UI 组件,它第一次执行时,接收4个参数,这些参数都是可选的,它执行的执行的结果还是返回一个函数,第二次执行接收一个 UI 组件

connect方法第一次执行时(connect())的四个参数:mapStateToPropsmapDispatchToPropsmergePropsoptions
connect方法第二次执行时传入的UI组件connect()(UI组件)

这里先说传state和传方法的两个函数
mapStateToProps函数返回的是一个对象(对象value是state),mapStateToProps用于传递状态
mapDispatchToProps函数返回的是一个对象(对象value是function),mapDispatchToProps用于传递操作状态的方法

这只是官方推荐的API定义方式,后面还有更简写的方式来传递state和function

官方解释:mapStateToPropsmapDispatchToProps

具体在UI获取时候的key,还是需要看return的对象把key定义成什么,才能用this.props来获取key


同时之前的定时加操作是在UI组件里面做的,并没有放在`count_action.js`里面,所以把定时加操作搬进`count_action.js`

优化之后:
Container.jsx:

import { connect } from "react-redux";
import CountUI from "../../components/count/CountUI";
import { add, sub, addAsync } from "../../redux/count_action";

// 传递state
function mapStateToProps(store) {
  return { key1: store };
}

// 传递dispatch
function mapDispatchToProps(dispatch) {
  // 允许传递多个函数   通过dispatch通知Redux执行函数
  return {
    // add操作的函数
    add: (data) => dispatch(add(data)),
    // sub操作的函数
    sub: (data) => dispatch(sub(data)),
    // addAsync操作的函数,addAsync操作搬进action里
    addAsync: (data, time) => dispatch(addAsync(data, time)),
  };
}

// 传入func mapStateToProps(负责state传递)  func mapDispatchToProps(负责函数动作传递)
// 最后传入CountTemplate组件完成连接
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

ConuntTemplate.jsx:

import React, { Component } from "react";

export default class Count extends Component {
	...
  addAsync = () => {
    const { value } = this.selectNumber;
    this.props.addAsync(value * 1, 500);
  };

  render() {
    return (
      <div>
		...
      </div>
    );
  }
}

count_action.js:

/*
该文件专门为Count需要用的Reducer去生成action对象,封装好type,这样在调用组件传一个data进来就可以了
*/
import { ADD, SUB, ADD_ASYNC } from "./constant.js";

export function add(data) {
  // 要返回Action对象(返回type和data数据)
  return { type: ADD, data };
}

export function sub(data) {
  // 要返回Action对象(返回type和data数据)
  return { type: SUB, data };
}

// 把这个定时操作集成在action里面 => addAsync
// setTimeout(() => {
//   this.props.add(value * 1);
// }, 500);
export function addAsync(data, time) {
  // dispatch为自动传入
  return (dispatch) => {
    setTimeout(() => {
      // 通过dispatch调用add,直接调用是不可以的
      dispatch(add(data));
    }, time);
  };
}

其他的文件没啥变化,不赘述了

写到这里其实 connect 已经比较完善了,但是你可以仔细想想 redux 的工作流程

image-20210909194900532

似乎少了点什么,我们在这里调用了函数,创建了 action 对象,但是好像 store 并没有执行 dispatch ,那是不是断了呢?执行不了呢?

其实这里 react-redux 已经帮我们做了优化,当调用 Action Creator 的时候,会立即发送 actionstore 而不用手动的 dispatch。后面马上会用到这个。

总结React-Redux的基本使用

(1).明确两个概念:
			1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
			2).容器组件:负责和redux通信,将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
				connect(mapStateToProps,mapDispatchToProps)(UI组件)
					-mapStateToProps:映射状态,返回值是一个对象(对象以k:v形式保存state)
					-mapDispatchToProps:映射操作状态的方法,返回值是一个对象(对象以k:v形式保存多个方法)
(3).备注1:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
(4).备注2:mapDispatchToProps,也可以是一个对象(只传递一个方法,如果多个方法就需要多个k:v对象)

React-Redux优化

之前的案例,很多功能都是杂糅到一起的,如果体量大起来会让人不知道该怎么办,所以这里在这个案例里面对之前的功能代码进行拆分操作,分文件处理。优化文件结构。

前置知识

例子1:

 function mapStateToProps(store) {
   return { key1: store };
 }

可以用箭头函数来写

const mapStateToProps = (store)=> {
   return { key1: store };
 }

如果箭头函数只有一句并且默认return只有一个对象,就可以省略return,直接箭头指一个括号,就代表return值了 ({ key1: store })
最后优化完

const mapStateToProps = (store)=> ({ key1: store })

例子2:

function mapDispatchToProps(dispatch) {
  // 多个方法传递
  return {
    add: (data) => dispatch(add(data)),
    sub: (data) => dispatch(sub(data)),
    addAsync: (data, time) => dispatch(addAsync(data, time)),
  };
}

按照上面的说法,反正只有一个return,这里就可以直接优化成

mapDispatchToProps=(dispatch)=>{
    add: (data) => dispatch(add(data)),
    sub: (data) => dispatch(sub(data)),
    addAsync: (data, time) => dispatch(addAsync(data, time)),
  }

带入到connect里面,甚至不用写属性,直接把函数体丢进去即可

简写 mapStateToProps & mapDispatchToProps

对于connect来说,第一次调用connect(),传入什么名字的函数不重要,传入的位置很重要,connect只认位置上的传入的值。
简写完前后对比:

/*
// 传统写法
 function mapStateToProps(store) {
   return { key1: store };
 }
 function mapDispatchToProps(dispatch) {
   // 多个方法传递
   return {
     add: (data) => dispatch(add(data)),
     sub: (data) => dispatch(sub(data)),
     addAsync: (data, time) => dispatch(addAsync(data, time)),
   };
 }
*/

// 引入connect生成一个容器组件,连接好React-Redux和UI组件,并暴露
// UI组件中依旧是通过this.props.xxxxxxx读取和操作状态
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
export default connect(
  // 对于第一个参数位置来说,首次调用可以传四个参数[ mapStateToProps 、mapDispatchToProps 、mergeProps、options  ]
 //store没有React-Redux给你自动调用,所以这里要自己写
  (state) => ({ count: state }), // 等价于mapStateToProps 

  //mapDispatchToProps的简写(key:函数名),甚至不需要标注参数列表
  //dispatch有React-Redux给你自动调用,所以这里不用写了
  { add: add, sub: sub, addAsync: addAsync }//等价于mapDispatchToProps 
)(CountUI);

完整开发

目录结构:
在这里插入图片描述

首先就是把Contrainer和UI组件放在一起,合并成一个Container文件叫Count。虽然文件是在一起,但是功能和类都是分开的。只是文件放一起了,对外依旧暴露Container,UI这次彻底不用export了。

import { connect } from "react-redux";
import { add, sub, addAsync } from "../../redux/count_action";
import React, { Component } from "react";

// 这次CountUI彻底不用暴露了,暴露的任务交给connect来做。connect生成一个对外的Container,同时包含了数据和UI组件
// export default class Count extends Component {
class CountUI extends Component {
  add = () => {
    const { value } = this.selectNumber;
    this.props.add(value * 1);
  };
  sub = () => {
    const { value } = this.selectNumber;
    if (this.props.key1 === 0 || this.props.key1 < value) {
      return;
    }
    this.props.sub(value * 1);
  };
  addNotOdd = () => {
    const { value } = this.selectNumber;
    if (this.props.key1 % 2 !== 0) {
      this.props.add(value * 1);
    }
  };
  addAsync = () => {
    const { value } = this.selectNumber;
    this.props.addAsync(value * 1, 500);
  };

  render() {
    console.log(this.props);

    return (
      <div>
        <div>当前求和:{this.props.key1}</div>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <div>
          <button onClick={this.add}>add</button>
          <button onClick={this.sub}>sub</button>
          <button onClick={this.addNotOdd}>addNotOdd</button>
          <button onClick={this.addAsync}>addAsync</button>
        </div>
      </div>
    );
  }
}

/*
 function mapStateToProps(store) {
   return { key1: store };
 }
 function mapDispatchToProps(dispatch) {
   // 多个方法传递
   return {
     add: (data) => dispatch(add(data)),
     sub: (data) => dispatch(sub(data)),
     addAsync: (data, time) => dispatch(addAsync(data, time)),
   };
 }
*/

// 引入connect生成一个容器组件,连接好React-Redux和UI组件,并暴露
// UI组件中依旧是通过this.props.xxxxxxx读取和操作状态
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
export default connect(
  (state) => ({ key1: state }), // 状态
  { add: add, sub: sub, addAsync: addAsync } // 方法(不再需要注明参数列表)
)(CountUI);

Provider组件使用

首先看个之前的store传递,很麻烦,需要手动传递,如果每个标签都传递,都需要使用 store 时,很麻烦的

<Count store={store}/>
{/* 示例 */}
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>

所以官方就提供了一个大组件Provider,自动可以寻找需要用store的标签,自动精准传递store进去

我们可以这么做:在 src 目录下的 index.js 文件中,引入 Provider ,直接用 Provider 标签包裹 App 组件,将 store 写在 Provider 中即可

import { Provider } from "react-redux";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

这样我们在 App.jsx 文件中,组件无需手写指定 store ,即可使用 store 非常方便

总结React-Redux优化

1.容器组件和UI组件整合一个文件

2.若有多个容器组件,无需自己给每个容器组件传递store,给包裹一个<Provider store={store}>即可。整体就贡献同一个store了。

3.使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。

4.mapDispatchToProps也可以简单的写成一个对象,因为react-redux可以自动dispatch

5.一个组件要和react-redux“打交道”要经过哪几步?

  • 1)定义好UI组件—不暴露
  • 2)引入connect生成一个容器组件,并暴露,写法如下:
connect(
	state => ({key:value}), //映射状态
	{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
  • 3)在UI组件中通过this.props.定义好的key名 读取和操作状态

React-Redux综合案例(多组件组合共享)

引言

在写完了基本的 Redux 案例之后,我们可以尝试一些更实战性的操作,比如我们可以试试多组件间的状态传递,相互之间的交互

react-redux-demo

如上动图所示,我们想要实现上面的案例,采用纯 React 来实现是比较困难的,我们需要很多层的数据交换才能实现,但是我们如果采用 Redux 来实现会变得非常简单

因为 Redux 打通了组件间的隔阂,完成了复杂组件的数据交互,我们可以自由的进行数据交换,所有存放在 store 中的数据都可以实现共享,那我们接下来看看如何实现的吧~

整合UI组件与容器组件

如果UI组件和容器组件都分开写,那么实际上文件数量就得成倍增长,为了优化就整合一下两个文件,把UI组件和容器组件 放在一起。实际开发中也是整合的。

首先,一个jsx文件里面可以定义多个组件,其实思想上还是容器组件往UI组件传props,只不过两个组件放在了同一个文件里,对外只暴露一个Container接口。

这里演示一下两个或者多个组件在同一个文件里
创建一个Test组件
在这里插入图片描述

import React, { Component } from "react";

// 默认对外暴露的容器组件
export default class Test extends Component {
    render() {
        return <div>Test</div>;
    }
}

// UI组件,不对外暴露,但是可以在自己文件里面用
class Test2 extends Component {
    render() {
        return <div>UI组件</div>;
    }
}
// 他俩之间的连接靠connect
// 这是个简单的connect,后面有详细的描述
export default connect(
    (state) => ({对象}),
    {
        // action动作
    }
)(CountUI);

所以以后就可以只留一个Container文件夹放容器组件

UI组件只要想去拿Redux的状态,就直接找内部的connect,因为这个connect已经拿到了Redux的所有state
后面有详细的描述

重新安排Redux文件结构

如果有Person和Count的组件,每个组件对应的action和reducer这两个文件,都是成倍的增长,所以肯定不能这么一大堆罗列于此,就要把Redux文件夹分层
在这里插入图片描述
分层后的Redux,将action文件和reducer文件分开

就不用再叫 组件_action.js组件_reducer.js 的这种了,因为已经在action文件夹下面了,根据文件夹就能分辨出来
在这里插入图片描述

React-Redux结构 & 合并Reducer

React-Redux结构

Redux里用的存储结构:
如果是只存了一个值,比如数字这种,那就是不用key去取,直接就this.store即代表着当前对象。
在这里插入图片描述

如果是存了两个值以上,n个对象,那就是Redux作为一个大对象,里面存了n多个小对象,通过key来获取目标对象(key是合并reducer时定义的)
在这里插入图片描述

合并Reducer

之前的store中只注册了一个Reducer并导出,对于多个Reducer来说,只导出一个肯定是不行的,所以我们要将其他Reducer也注册到store里面,并且命名好key来帮助后续获取

这里提一个前置知识:combineReducers({对象})传入的对象,就是Redux保存的总对象


重要事情说三遍~
combineReducers({对象})传入的所有对象,就是Redux保存的总对象
combineReducers({对象})传入的所有对象,就是Redux保存的总对象
combineReducers({对象})传入的所有对象,就是Redux保存的总对象


合并后的store.js:

//引入store创建,以及中间件
import { combineReducers,createStore } from "redux";
//引入为store服务的Reducer
import countReducer from "../redux/reducer/count";
import personReducer from "../redux/reducer/person";

// 之前的store只能注册一个reducer,也就是count的countReducer
// 没法注册person的reducer,所以我们需要用函数把两个函数都注册了
// const store = createStore(countReducer, applyMiddleware(thunk));

// 合并
const allReducer = combineReducers({
    // sum就是countReducer的key,
    sum: countReducer,
    // persons就是personReducer的key,
    persons: personReducer,
});
//全局只暴露这个Reducers,同样需要用createStore函数创建
export default createStore(allReducer);

Container通过key获取对应的状态
Count组件的connect

// 使用connect建并暴露一个Count的容器组件,传a,b函数的返回值给UI组件
/*
    (state) => ({ sumNumber: state.sum })
    对应的含义:
    (默认传入的全局Redux对象) => ({ 自定义的在UI组件使用的名字: 默认传入的全局Redux对象.目标对象的key })
*/
export default connect(
    // 这里还获取了Person组件的人数长度(通过Redux获取其他组件的值)
    // 这里可以传入多个 k-v ,用逗号分隔
    (state) => ({ sumNumber: state.sum, personLength: state.persons.length }),
    {
        // action动作和以前一样传递即可
        add: add,
        sub: sub,
        addAsync: addAsync,
    }
)(CountUI);

Person组件的connect

/*
    (state) => ({ personList: state.persons }),
    对应的含义:
    (默认传入的全局Redux对象) => ({ 自定义的在UI组件使用的名字: 默认传入的全局Redux对象.目标对象的key }),
*/
export default connect(
    // 这里还获取了Count组件的求和值(通过Redux获取其他组件的值)
    // 这里可以传入多个 k-v ,用逗号分隔
    (state) => ({ personList: state.persons, countSum: state.sum }),
    {
        // 这里绑定的action该咋传咋传
        addPerson: addPerson,
    }
)(PersonUI);

整个案例代码

先看结构:
在这里插入图片描述
容器组件Count.jsx:

// 引入connect的API
import { connect } from "react-redux";
import { add, sub, addAsync } from "../../redux/action/count";

import React, { Component } from "react";

class CountUI extends Component {
    add = () => {
        const { value } = this.count;
        this.props.add(value);
    };
    sub = () => {
        const { value } = this.count;
        this.props.sub(value);
    };
    addNotOdd = () => {
        if (this.props.sumNumber % 2 !== 0) {
            this.props.add(value);
        }
    };
    addAsync = () => {
        const { value } = this.count;
        this.props.addAsync(value, 500);
    };

    render() {
        console.log(this.props);
        return (
            <div>
                <h1>
                    当前结果{this.props.sumNumber},下方组件总人数为
                    {this.props.personLength}
                </h1>
                选择内容
                <select ref={(c) => (this.count = c)}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                <button onClick={this.add}>+</button>
                <button onClick={this.sub}>-</button>
                <button onClick={this.addNotOdd}>当前奇数加</button>
                <button onClick={this.addAsync}>非同步加</button>
            </div>
        );
    }
}

// 使用connect建并暴露一个Count的容器组件,传a,b函数的返回值给UI组件
/*
    (state) => ({ sumNumber: state.sum })
    对应的含义:
    (默认传入的全局Redux对象) => ({ 自定义的在UI组件使用的名字: 默认传入的全局Redux对象.目标对象的key })
*/
export default connect(
    // 这里还获取了Person组件的人数长度(通过Redux获取其他组件的值)
    // 这里可以传入多个 k-v ,用逗号分隔
    (state) => ({ sumNumber: state.sum, personLength: state.persons.length }),
    {
        // action动作和以前一样传递即可
        add: add,
        sub: sub,
        addAsync: addAsync,
    }
)(CountUI);

容器组件Person.jsx:

import React, { Component } from "react";
import { addPerson } from "../../redux/action/person";
import { nanoid } from "nanoid";
import { connect } from "react-redux";

class PersonUI extends Component {
    addPerson = () => {
        const name = this.name.value;
        const age = this.age.value;
        if (name === "" || age === "") {
            return;
        }
        const newPeson = { id: nanoid(), name, age };

        this.props.addPerson(newPeson);
    };
    render() {
        return (
            <div>
                <h1>我是person组件,上方组件求和为:{this.props.countSum}</h1>
                <input
                    ref={(name) => {
                        this.name = name;
                    }}
                ></input>
                <input
                    ref={(age) => {
                        this.age = age;
                    }}
                ></input>
                <button onClick={this.addPerson}>add New Person</button>
                <ul>
                    {this.props.personList.map((p) => {
                        return (
                            <li key={p.id}>
                                name: {p.name}---- age: {p.age}
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

/*
    (state) => ({ personList: state.persons }),
    对应的含义:
    (默认传入的全局Redux对象) => ({ 自定义的在UI组件使用的名字: 默认传入的全局Redux对象.目标对象的key }),
*/
export default connect(
    // 这里还获取了Count组件的求和值(通过Redux获取其他组件的值)
    // 这里可以传入多个 k-v ,用逗号分隔
    (state) => ({ personList: state.persons, countSum: state.sum }),
    {
        // 这里绑定的action该咋传咋传
        addPerson: addPerson,
    }
)(PersonUI);

Action下的count.js:


import { ADD, SUB } from "../constant.js";
import store from "../store.js";

export const add = (data) => ({ type: ADD, data });
export const sub = (data) => ({ type: SUB, data });

// 异步action,就是只action的值为函数,在异步action中,一般都会调用同步action,异步action不是必须要用的
// 能在这里写函数,是因为在store做了redux-thunk的设置
export const addAsync = (data, time) => {
    return () => {
        // 这里其实只套了一个定时操作
        setTimeout(() => {
            // 调用已经定义好的增加action
            store.dispatch(add(data));
        }, time);
    };
};

Action下的person.js:

import { ADD_PERSON } from "../constant";

export const addPerson = (data) => ({ type: ADD_PERSON, data });

reducer下的count.js:

import { ADD, SUB } from "../constant.js";

export default function countReducer(previousState, action) {
    // 从Action对象里传来的action对象,里面包含type和data,所以我们需要解构出来。等待后续处理
    const { type, data } = action;
    if (previousState === undefined) {
        return 0;
    }

    // 判断传入功能类型
    switch (type) {
        case ADD:
            //这里用原来的值+新传入的值,得到新值
            return previousState + data * 1;
        case SUB:
            if (previousState < data * 1) {
                return previousState;
            }
            //这里用原来的值-新传入的值,得到新值
            return previousState - data * 1;
        // 提一嘴,这里都是return,所以不用break
        default:
            return previousState;
    }
}

reducer下的person.js:

import { ADD_PERSON } from "../constant.js";

const initPersonList = [{ id: "123456", name: "Tom", age: "20" }];

export default function personReducer(previousState = initPersonList, action) {
    const { type, data } = action;
    switch (type) {
        case ADD_PERSON:
            // 把之前的展开(之前的数组是没展开的),把新来的加进去
            return [data, ...previousState];
        default:
            return previousState;
    }
}

常量constant.js

export const ADD = "add";
export const SUB = "sub";
export const ADD_PERSON = "addPerson";

store.js

//引入store创建,以及中间件
import { applyMiddleware, combineReducers, createStore } from "redux";
//引入为store服务的Reducer
import countReducer from "../redux/reducer/count";
import personReducer from "../redux/reducer/person";
import thunk from "redux-thunk";

// 之前的store只能注册一个reducer,也就是count的countReducer
// 没法注册person的reducer,所以我们需要用函数把两个函数都注册了
// const store = createStore(countReducer, applyMiddleware(thunk));

// 合并
const allReducer = combineReducers({
    // sum就是countReducer的key,
    sum: countReducer,
    // persons就是personReducer的key,
    persons: personReducer,
});

// 全局只暴露这个Reducers,同样需要用createStore函数创建
// 同时允许接收函数的applyMiddleware(thunk)也不能丢了
export default createStore(allReducer, applyMiddleware(thunk));

App.jsx

class App extends React.Component {
    render() {
        return (
            <div>
                <Provider store={store}>
                    {/* 用Provider组件的props传递store进入Container组件 */}
                    // 被Provider组件包裹的子组件都能自动接收到store
                    // 这俩都是容器组件
                    <Count></Count>
                    <Person></Person>
                </Provider>
            </div>
        );
    }
}
export default App;

发现个小bug:
在这里插入图片描述
原因是没有弄redux-thunk做中间件支持,再详细可以看这个:redux-thunk

总结React-Redux综合案例

(1).定义一个Pserson组件,和Count组件通过redux共享数据。
(2).为Person组件编写:reducer、action,配置constant常量。
(3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并,
		合并后的总状态是一个对象!!!
(4).交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。

纯函数概念

就是一个概念,没有编码

引言

1.一类特别的函数: 只要是同样的输入(实参),必定得到同样的输出(返回)

2.必须遵守以下一些约束

  • 1)不得改写参数数据
  • 2)不会产生任何副作用,例如网络请求,输入和输出设备
  • 3)纯函数里面不能调用Date.now()或者Math.random()等不纯的方法

3.redux的reducer函数必须是一个纯函数

例子

纯函数要求输入和输出相同
比如:

// a是纯函数
function a(data) {
    return data;
}
// b不是纯函数
function b(data) {
    let c = 1;
    return c;
}

再拿一个reducer举个例子:
这里的 return [data, ...previousState];。因为地址引用发生了变化,所以就能触发页面更新。因为Redux是浅比较,不比较对象内容,发现return的引用地址变化了就自动更新了。

export default function personReducer(previousState = initPersonList, action) {
    const { type, data } = action;
    switch (type) {
        case ADD_PERSON:
            // 把之前的展开(之前的数组是没展开的),把新来的加进去
            return [data, ...previousState];
        default:
            return previousState;
    }
}

如果是非纯函数,比如这样。这就无法生效,因为不是纯函数

export default function personReducer(previousState = initPersonList, action) {
    const { type, data } = action;
switch (type) {
        case ADD_PERSON:
            var newArray = previousState;
            newArray.push(data);
            return newArray;
        default:
            return previousState;
    }
}

Redux-DevTools

顾名思义,开发者工具

需要插件+npm库的依赖

 npm install redux-devtools-extension --legacy-peer-deps

在这里插入图片描述

store需要导入redux-devtools-extension的依赖,并且在暴露store的connect函数的第二个参数位置传入对应的api
如果之前有applyMiddleware(thunk)的中间件操作,可以选择将中间件传入其api

...省略
// redux-devtools api
import { composeWithDevTools } from "redux-devtools-extension";

// 合并
const allReducer = combineReducers({
    // sum就是countReducer的key,
    sum: countReducer,
    // persons就是personReducer的key,
    persons: personReducer,
});

export default createStore(
    allReducer,
    // redux-devtools api
    composeWithDevTools(applyMiddleware(thunk))
);

再次启动项目,就可以在浏览器的插件里面看redux存进去的东西了

在这里插入图片描述

总结工具使用

(1).yarn add redux-devtools-extension
(2).store中进行配置
		import {composeWithDevTools} from 'redux-devtools-extension'
		const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

Reducers优化

之前store中,所有的Reducers都是积压在store中进行的合并,如果是大型项目将难以维护,所以我们一般把Reducers的合并,放在一个单独的js文件中去做,完成导出,导出完毕之后在store中引入即可
在这里插入图片描述
在reducer下专门新建一个index文件,完成汇总合并操作

/*
    该文件用于汇总所有的reducer为一个总的reducer
*/
import { combineReducers } from "redux";

//引入为store服务的Reducer
import countReducer from "./count";
import personReducer from "./person";
// 合并
const allReducer = combineReducers({
    // sum就是countReducer的key,
    sum: countReducer,
    // persons就是personReducer的key,
    persons: personReducer,
});

// 导出
export default allReducer;

精简之后的store文件,非常清爽

//引入store创建,以及中间件
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

// 引入reducers
import allReducer from "./reducer";

export default createStore(
    allReducer,
    composeWithDevTools(applyMiddleware(thunk))
);

总结:

(1).所有变量名字要规范,尽量触发对象的简写形式。
(2).reducers文件夹中,编写index.js专门用于汇总并暴露所有的reducer

文章来源:https://blog.csdn.net/weixin_46906696/article/details/134710254
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。