第十四章 React之Redux状态管理库

一、专栏介绍 💥💥

欢迎加入本专栏！本专栏将引领您快速上手React，让我们一起放弃放弃的念头，开始学习之旅吧！我们将从搭建React项目开始，逐步深入讲解最核心的hooks，以及React路由、请求、组件封装以及UI（Ant Design）框架的使用。让我们一起掌握React，开启前端开发的全新篇章！

二、React Redux 💢💢

React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过dispatch actions去更新 store 中的 state。

三、安装依赖 🎶🎶

npm install react-redux

四、配置 🎵🎵

这个东西呢确实非常的简单，我这里就不过多的说明了，直接跟着TypeScript 快速入门 | React Redux 中文文档

官网文档写就能出来效果，我这里就把官网的案例改一下。

4.1、创建src/store/userInfo.ts文件 👇👇👇

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from './index';

// 定义 slice state 的类型
interface CounterState {
  name: string;
  age: number;
}

// 使用该类型定义初始 state
const initialState: CounterState = {
  name: '张三',
  age: 18,
};

export const userInfo = createSlice({
  name: 'userInfo',
  // `createSlice` 将从 `initialState` 参数推断 state 类型
  initialState,
  reducers: {
    initWhole: (state) => ({ name: '张三', age: 18 }),
    updateWhole: (state, action: PayloadAction<CounterState>) => ({ ...state, ...action.payload }),
    updateName: (state, action: PayloadAction<string>) => {
      state.name = action.payload;
    },
    updateAge: (state, action: PayloadAction<number>) => {
      state.age = action.payload;
    },
  },
});

export const { initWhole, updateWhole, updateName, updateAge } = userInfo.actions;

// selectors 等其他代码可以使用导入的 `RootState` 类型
export const selectUserInfo = (state: RootState) => state.userInfo;

export default userInfo.reducer;

4.2、创建src/store/index.ts文件 👇👇👇

import { configureStore } from '@reduxjs/toolkit';
import userInfoReducer from './userInfo';

const store = configureStore({
  reducer: {
    userInfo: userInfoReducer,
  },
});

// 从 store 本身推断 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;

// 推断类型：{posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

export default store;

4.3、定义Hooks 👇👇👇

新建src/hooks/useAppSelector.tsx文件

import { TypedUseSelectorHook, useSelector } from 'react-redux';
import type { RootState } from '../store';

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

新建src/hooks/useAppDispatch.tsx文件

import { useDispatch } from 'react-redux';
import type { AppDispatch } from '../store';

export const useAppDispatch: () => AppDispatch = useDispatch;

4.4、修改App.tsx 👇👇👇

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import router from './router';
import './global.scss';
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <RouterProvider router={router} />
      </div>
    </Provider>
  );
}

export default App;

五、使用 🌀🌀

这里直接上使用的源代码，路由啥的自己完成一下。

import React from 'react';
import { useAppSelector } from '../hooks/useAppSelector';
import { useAppDispatch } from '../hooks/useAppDispatch';
import { initWhole, updateAge, updateName, updateWhole } from '../store/userInfo';

const ReduxDemo: React.FC = () => {
  const userInfo = useAppSelector((state) => state.userInfo);
  const dispatch = useAppDispatch();

  return (
    <>
      <div>
        <div>
          <span>姓名：{userInfo.name}</span>
          <span>年龄：{userInfo.age}</span>
        </div>

        <button aria-label="Decrement value" onClick={() => dispatch(initWhole())}>
          初始化用户信息
        </button>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(updateWhole({ name: '王五', age: 23 }))}
        >
          更改用户信息
        </button>
        <button aria-label="Decrement value" onClick={() => dispatch(updateName('张三'))}>
          更改名称
        </button>
        <button aria-label="Decrement value" onClick={() => dispatch(updateAge(26))}>
          更改年龄
        </button>
      </div>
    </>
  );
};

export default ReduxDemo;

import React from 'react';
import { useAppSelector } from '../../hooks/useAppSelector';
import { selectUserInfo } from '../../store/userInfo';

const Home: React.FC = () => {
  const userInfo = useAppSelector((state) => state.userInfo);

  return (
    <>
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '45px',
        }}
      >
        这里是首页Home，路由/，当前的用户信息是
        <div>
          <span>姓名：{userInfo.name}</span>
          <span>年龄：{userInfo.age}</span>
        </div>
        <button
          onClick={() => {
            console.log('👉👉👉-----------------', selectUserInfo({ userInfo }).name);
          }}
        >
          获取用户信息的name
        </button>
      </div>
    </>
  );
};

export default Home;

六、总结 💪💪

React Redux提供了统一的、可预测的状态管理方案，使得开发者能够更好地组织和管理应用的状态。它通过使用单一数据源、不可变性和纯函数等核心概念，提供了一种可靠的状态管理方式，减少了状态管理方面的困惑和错误。

良好的状态管理能够提高应用的可维护性、可扩展性和可测试性。React Redux的状态管理方案可以帮助开发者更容易地跟踪和调试应用中的状态变化，提高了代码的可维护性。

React专注于构建用户界面，而Redux则负责状态管理。React的组件化开发方式可以让开发者通过组件构建复杂的用户界面，而Redux可以帮助开发者更好地管理应用的状态，两者结合使得应用的状态和界面更加清晰和易于管理。

React Redux具有灵活的架构和丰富的生态系统，为开发者提供了各种工具和库，以应对不同场景的需求。同时，Redux具有简洁的API和强大的中间件支持，方便开发者进行扩展和优化。

综上所述，React Redux在开发中给开发者带来了更好的状态管理、可维护性、组件化开发、扩展性和灵活性等好处。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇