---

Redux

Redux 中的核心概念

Reducer

是一个用来改变 state 的纯函数，传入state 通过应用状态与 Action 推导出新的 state。

Action

Store

• 存储应用 state 以及用于触发 state 更新的 dispatch 方法等，单一的 Store 。
• Store 中提供了几个 API :
• store.getState(): 获取当前 state。
• store.dispatch(action): 用于 View 发出 Action。
• store.subscribe(listener): 设置监听函数，一旦 state 变化则执行该函数（若把视图更新函数作为 listener 传入，则可触发视图自动渲染）。

Redux 的特点

• 单向数据流
• 单一数据源 ，只有一个 Store 和 Vuex 一样
• state 是只读的，每次状态更新后返回一个新的 state
• Store中集成了 dispatch 方法，该方法是 View 发出 Action的唯一途径。

创建store/index.js 作为主文件

import { configureStore } from "@reduxjs/toolkit";

//子模块导入，可自定义多个
import counterStore from "./modules/counterStore";

// 创建store组合子模块
const store = configureStore({
  reducer:{
    counterStore,
  }
})

export default store

创建子文件/store/modules/aadmin.js

这个文件相当于一个对象的数据存储位置

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

const counterStore = createSlice({
  name: "todos",
  // 存储数据
  initialState: {
    count:0
  },
  // 方法逻辑函数
  reducers: {
    inscrement(state,action) {
      state.count-=action.payload
    },
    decrement(state,{payload}) {
      state.count+=payload
    },
  },
});

// 导出
export const { decrement, inscrement } = counterStore.actions;
export default counterStore.reducer;

导出index.js文件到根index.js使用

import { Provider } from “react-redux”;
import store from “./store”;
导入并用Provider组件包裹App组件，传入store

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from "./store";
import { Provider } from "react-redux";
import { RouterProvider,router } from "./router";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      {/* 绑定路由 */}
      <RouterProvider router={router} >
        {/* 绑定redux */}
       <Provider store={store}>
          <App />
       </Provider>
       </RouterProvider>
  </React.StrictMode>
);
reportWebVitals();

使用Redux的方法useSelector,useDispatch两个hooks

useSelector,useDispatch 获取和设置

import { useSelector,useDispatch } from "react-redux";
import { inscrement,decrement } from "./store/modules/counterStore";

import './App.css';

import Home from "./components/Home";
function App() {
  // react-redux中间件导入 useSelector() 函数获取store参数
  const {count} = useSelector(state=>state.counterStore)
  // react-redux中间件导入 useSelector() 函数获取store函数使用
  const dispach = useDispatch()
  return (
    <div 
    className="App active"
    > 
      {count}
      <button type="" onClick={()=>dispach(inscrement(10))}>++</button>
      <button type="" onClick={()=>dispach(decrement(10))}>--</button>
      <Home>
        <span>12222</span>
      </Home>
    </div>
  );
}

export default App;

更多方法请查看Redux官网
到此redux配置完毕

zustand轻量状态管理

Zustand

• Zustand 是一个轻量级的状态管理库，用于 JavaScript 应用程序，特别是在 React 生态系统中。它提供了一个简单、可扩展的解决方案来中心化和管理应用程序的状态。
• 与其他状态管理解决方案（如 Redux 或 MobX）相比，Zustand 旨在提供更简洁的 API 和更少的样板代码。它允许你创建一个全局状态存储，并且可以在应用程序的任何地方访问和更新这个状态，而不需要像 Redux 那样编写大量的 action creators 和 reducers。

Zustand 的主要特点包括：

• 简洁的 API：创建 store 和访问 state 都非常直观。

• React hooks：Zustand 与 React hooks 完美整合，使得在 React 组件中使用状态变得非常简单。

• 不可变更新：通过 Immer 库支持，Zustand 允许你以一种直观的方式更新复杂的状态对象。

• 中间件支持：可以使用中间件来添加额外的功能，例如日志记录、持久化等。

• 没有“单一真相来源”的限制：与 Redux 不同，Zustand 允许你创建多个独立的 store。

• Zustand 是在 React 社区内广受欢迎的解决方案之一，适用于那些想要更简单状态管理工具的开发者。

解决的问题

Zustand 主要旨在解决以下问题：

• 简化状态管理：提供一个更直观的 API，通过避免 Redux 那样的冗余样板代码，使得状态管理更加简洁和直接。

• 更好的开发体验：通过使用 React Hooks，Zustand 使得在函数组件中访问和更新状态变得容易。

• 无拘无束：Zustand 允许创建多个独立的 store，不强制要求"单一真相来源"，给予开发者更多的灵活性。

• 性能优化：Zustand 允许组件仅订阅状态的一部分，从而减少不必要的渲染和提高性能。

• 简单的状态共享：不需要复杂的上下文或提供者，状态可以跨组件和文件轻松共享。

• 中间件和增强功能：支持中间件，使得开发者可以轻松添加日志记录、持久化存储等增强功能。

• 适应现代 React 功能：考虑到了 React 的新特性，如 Concurrent Mode 和 Suspense，从而确保在现代 React 特性下的稳定性。

• 总之，Zustand 应运而生，旨在为开发者提供一个轻便、简单且功能强大的状态管理库，让状态管理变得更加易于使用和维护。

安装

npm i zustand -D

创建zustand/index.js文件

和redux类似，
zustand给每个create函数单独配置，可配置多个，直接导出使用

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

export {
  useBearStore
}

使用

导入useBearStore，
使用useBearStore(state=>state.bears)，可直接执行函数，或返回键值对的值

import { useMemo, useState } from "react"
import { useBearStore } from "../zustand/index";
const fib=(n)=>{
  console.log('计算函数执行了');
  if(n<3)
  return 1
return fib(n - 2) + fib( n - 1)
}
function Index() {
  const [count1,setCount1]=useState(0)
  const result =useMemo(()=>{
    fib(count1)
  },[count1])
  const [count2,setCount2]=useState(0)
  const a = useBearStore(state=>state.bears)
  const a1 = useBearStore(state=>state.increasePopulation)
  return (
    <div style={{color:'red'}}>
      Index
      <button type="" onClick={()=>setCount1(count1 +1)}>{count1}</button>
      <button type="" onClick={()=>setCount2(count2 +1)}>{count2}</button>
      <button type="" onClick={a1}>{a}</button>
      {result}
    </div>
  )
}

export default Index;