Reselect整合Redux

快速入门

下载对应依赖：npm install reselect

创建一个新文件 ReselectTest.js

由于逻辑比较复杂，请直接看下方注释

// 导包
import { createSelector } from "reselect";

// 第一步
// 定义一个数据源
const data = {
	count: 0,
};

// 第二步
// 选择我们需要用到的变量，这里的state表示数据源，必须写成函数的形式
const count = (state) => state.count;

// 第三步
// 使用createSelector对指定数据进行处理
// 参数一：欲监听的变量或属性（写成数组的形式）
// 参数二：对变量或属性做出的回调操作（这里写成箭头函数，且函数形参与参数一数组内变量数量一一对应）
const plus = createSelector([count], (count) => {
	count++;
	console.log(count);
});

// 第四步
// 调用select
plus(data);

使用 node 快速运行一下，发现输出 1

完整过程：plus 方法传入数据源 data，根据定义的 count 获取到数据源内部的属性 count；直接对 count 属性进行自增以及 log 输出的操作

整合 Redux

创建 slice

import { createSlice, createSelector } from "@reduxjs/toolkit";

const initialState = {
	count: 0,
};

const reselectSlice = createSlice({
	name: "reselector",
	initialState,
	reducers: {
		changeCount(state) {
			state.count += 1;
		},
	},
});

// 在这里定义好我们要监听的属性模板以及事业createSelector创建select
const countState = (state) => state.count;
export const countListener = createSelector([countState], (countState) => {
	console.log(countState);
});

export const { changeCount } = reselectSlice.actions;

export default reselectSlice.reducer;

函数组件调用 slice

import React, { useEffect } from "react";

import { useSelector, useDispatch } from "react-redux";
import { changeCount, countListener } from "./reselectSlice";

const ReselectLayout = () => {
	const state = useSelector((state) => state.reselector);
	const dispatch = useDispatch();

	// 副作用中每次都调用
	// 传入的state为父组件透传下来的数据源（烦死了解释不清楚。。。）
	useEffect(() => {
		countListener(state);
	});

	return (
		<>
			<div>{state.count}</div>
			<button
				onClick={() => {
					dispatch(changeCount());
				}}
			>
				修改数据
			</button>
		</>
	);
};

export default ReselectLayout;