React清单 - React Redux

Redux

Redux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理。Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。

而下面说的「React Redux」则是React官方推出来的基于Redux进行封装的开源库。

React Redux

Redux 的官方 React 绑定， Official React bindings for Redux。
1、提出了UI组件和容器组件的概念
2、UI组件负责展示页面和数据，容器组件作为中间桥梁负责连接UI组件和redux之间的数据传递

本文将简单介绍「React Redux」的使用方法。

一、安装使用 和 持久化

第一步： 安装依赖 并 配置编写 store 相关文件

// 1. 安装依赖： 
$ yarn add react-redux
$ yarn add @reduxjs/toolkit
$ yarn add redux-persist    // React-redux持久化

// 2. 创建 Redux 状态（单个）
// 关键词分析：
// 2.1 createSlice: 创建 Redux 状态片，它包含 一个字符串名称来标识切片、一个初始状态值以及一个或多个 reducer 函数来定义如何更新状态。
// 2.1 counterSlice.actions: 导出生成的 Redux action creators
// 2.1 counterSlice.reducer: 整个切片的 reducer 函数
// ====== src/store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
    name: 'counter',
  initialState: {
      value: 0,
      list: [1, 2, 3]
  },
  reducers: {
    increment: (state) => {
        state.value += 1
    },
    decrement: (state) => {
        state.value -= 1
    },
    incrementByAmount: (state, action) => {
        state.value += action.payload
    },
    addItem: (state, action) => {
      state.list = [...state.list, action.payload]
    }
  },
})
export const { increment, decrement, incrementByAmount, addItem } = counterSlice.actions
export default counterSlice.reducer

// 3. 将单个Redux注入全局桶
// 关键词分析：
// 3.1 configureStore: 使用configureStore方法创建store
// 3.1 combineReducers: 辅助函数，作用是把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数
// 3.1 persistReducer: 使用persistReducer时需要指定persistConfig，这一项就是你需要缓存的数据处理项，它类似黑白名单的处理方式，还需要一个storage的协助
// ====== store/index.js
import { configureStore } from '@reduxjs/toolkit'
import storage from 'redux-persist/lib/storage'
import {combineReducers} from "redux"; 
import { persistReducer } from 'redux-persist'
import thunk from 'redux-thunk'
// 从 counter slice 中导入 reducer 函数并将其添加到我们的 store 中
import counterReducer from './counterSlice'

const reducers = combineReducers({
  counter: counterReducer,        
});
const persistConfig = {
  key: 'root',
  storage           // storage 可以理解成localStorage的功能封装
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk]
});
export default store;

注意

现在官方推荐用@reduxjs/toolkit的configureStore方法代替createStore

第二步：将store注入全局组件中

// ====== src/index.js             // 入口文件
import React, { Suspense } from "react";
import { createRoot } from "react-dom/client";
// React-redux
import { Provider } from 'react-redux'
import store from './store'
// 持久化：本质还是把store存到 local Storage 里面
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'

const root = createRoot(document.getElementById("root"));
// 持久化
let persistor = persistStore(store);
root.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            {/* ... */}
        </PersistGate>
    </Provider>
);

第三步：使用 React Redux

// ====== src/App.js
import React, {Component} from 'react'
import Button from '@mui/material/Button'

// React Redux 提供了一对自定义的 React 钩子，允许您的 React 组件与 Redux 存储进行交互。
// useSelector从 store 状态读取一个值并订阅更新，同时useDispatch返回 store 的dispatch方法让您调度操作。
import { useSelector, useDispatch } from 'react-redux'
import { increment, addItem } from './store/counterSlice'

function App() {
  const counter = useSelector(state => state.counter.value);
  const { list} = useSelector(state => state.counter);
  const dispatch = useDispatch()
  return (
    <div className="App">
      <Button variant="contained" onClick={() => dispatch(increment())}>点我累加 - {counter} - （刷新页面也会保存累加值）</Button>
      <Button variant="contained" onClick={() => dispatch(addItem(4))}>点我push - {list.join(',')}</Button>
    </div>
  );
}

export default App;

二、其他

// todo ...

DEMO验证：
DEMO -- Redux Test

参考地址：
Redux 中文网
Redux 中文文档
React Redux