Redux 状态管理及简单案例

简介什么是 Redux

Redux 是 React 常用的状态管理工具，类似于 Vue 中的 Pinia 和 Vuex ,可以独立于框架运行，通过集中管理的方式管理应用的状态

安装

在 React 中使用 Redux，需要安装两个插件 Redux Toolkit 和 react-redux

 npm i @reduxjs/toolkit react-redux

Redux Toolkit 是一套工具的集合，简化书写方式
react-redux 用来链接 Redux 和 React 组件的中间件，因为 Redux 是可以单独使用的独立于框架运行

目录结构

1.通常集中状态管理的部分都会单独创建一个单独的 ‘store' 目录。
2.应用通常会有很多个子 store 模块,所以创建一个 `modules' 目录。
3.store 中的入口文件 index.js 的作用是组合 modules 中所有的子模块,并导出 store 。

步骤案例实践

1.在 counterStore.js 文件中编写 store 模块，定义方法与数据，并导出

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

//创建store
const counterStore = createSlice({
  //store名称
  name: 'counter',
  //初始值
  initialState: {
    count: 0,
  },
  //函数/方法
  reducers:{
    //增加
    add(state){
      state.count++
    },
    //减少
    minus(state){
      state.count--
    }
  }
})

//解构出来actionCreators函数
const {add,minus} = counterStore.actions
//获取reducer
const reducer = counterStore.reducer
//按需导出actionCreators函数
export {add,minus}
//默认导出reducer
export default reducer

2.在 modules 目录中的 index.js 文件中，合并组合子模块并导出

import { configureStore } from "@reduxjs/toolkit";
//导入子模块reducer
import counterReducer from "./modules/counterStore.js";
//创建store
const store = configureStore({
  reducer:{
    counter:counterReducer
  }
})
//导出store
export default store

3.在 index.js 入口文件，为 React 注入 store，react-redux 负责把 Redux 和 React 链接起来,内置的 Provider 组件通过store 参数把创建好的 store 实例注入到应用中链接正式建立

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import App from './App';
//导入store
import store from './store/index.js';
//内置的Provider组件
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

4.在 App.js 文件中，使用 store 的数据以及方法，在 React 组件中使用 store 中的数据,需要用到一个钩子函数 useSelector ,它的作用是把 store 中的数据映射到组件中

import { useDispatch,useSelector } from "react-redux";
import { add,minus } from "./store/modules/counterStore.js";
function App() {
  // 使用 useSelector 钩子获取 counter 状态
  const {count} = useSelector(state => state.counter)
  // 使用 useDispatch 钩子获取 dispatch 函数
  const dispatch = useDispatch()
  return (
    <div className="App">
      <button onClick={() => dispatch(add())}>+</button>
      {count}
      <button onClick={() => dispatch(minus())}>-</button>
    </div>
  );
}

export default App;

关键 hook 函数：

useSelect 获取 store 中的数据
useDispatch 获取 dispatch 方法

Redux 要比 Pinia 和 Vuex 使用复杂，要下去多多练习