6.Redux状态管理

书诚小驿2025/07/01前端知识库React

一、Redux 状态管理

1、Redux 基础介绍

2、Redux 基础使用

redux和redux-devtools-extension 安装

redux-devtools-extension扩展是redux的调试工具且注意redux-devtools-extension现在的版本要求的 redux 版本是 ^3.1.0 || ^4.0.0

npm install redux@4.0.0
npm install --save redux-devtools-extension

创建src/store/index.js文件

import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

function couterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "inc":
      return { count: state.count + 1 };
    default:
      return state;
  }
}
// 创建store
const store = createStore(couterReducer, composeWithDevTools());
export default store;

创建src/About/About.jsx文件

import React from 'react'
import store from "../../store";
import { useState } from "react";
export default function About() {
  const [count, setCount] = useState()
  const handleClick = () => {
    store.dispatch({ type: "inc" })
  }
  // 订阅store，更新count
  store.subscribe(() => {
    setCount(store.getState().count)
  })
  return (
    <>
      {count || 0}
      <button onClick={handleClick}>+</button>
    </>
  )
}

3、Redux 进阶使用

react-redux简化redux的使用

安装react-redux

npm install react-redux
# 如果有依赖冲突，使用 --legacy-peer-deps 选项
npm install react-redux --legacy-peer-deps

这种方法会忽略对等依赖冲突，但可能会导致潜在的兼容性问题。

<Provider store={store}>

src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { RouterProvider } from "react-router-dom";
import router from "./router/index";
import { Provider } from "react-redux";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router}></RouterProvider>
    </Provider>
  </React.StrictMode>
);

useSelector和useDispatch

src/About/About.jsx

import React from 'react'
import { useSelector, useDispatch } from "react-redux";
export default function About() {
  const count = useSelector((state) => state.count)
  const handleClick = () => {
    dispatch({
      type: 'inc',
      payload: 5,
    })
  }
  const dispatch = useDispatch()
  return (
    <>
      {count || 0}
      <button onClick={handleClick}>+</button>
    </>
  )
}

src/store/index.js

import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

function couterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "inc":
      return { count: state.count + action.payload };
    default:
      return state;
  }
}
// 创建store
const store = createStore(couterReducer, composeWithDevTools());
export default store;

6.Redux状态管理

一、Redux 状态管理

1、Redux 基础介绍

2、Redux 基础使用

3、Redux 进阶使用

目录