react函数组件中使用redux

最新推荐文章于 2025-02-01 16:39:36 发布

Adasunshine

最新推荐文章于 2025-02-01 16:39:36 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/FormAda/article/details/126300147

react 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在React项目中集成Redux进行状态管理，包括安装配置、创建store、定义actions与reducers，以及如何通过Provider全局注册store并利用useDispatch与useSelector进行state的更新与获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.安装redux、react-redux

yarn add redux
yarn add react-redux

二.创建文件

创建stores文件夹，在stores文件夹下创建index.ts、action.ts、reducer.ts(若是js改下后缀名就行)

index.ts:

import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer);

export default store;

action.ts:

export interface ActionType {
  type: string;
  value: any;
}

export const addRouters = (value): ActionType => {
  return {
    type: "add_Routers",
    value,
  };
};

reducer.ts:

import { ActionType } from "./action";

const reducer = (state, action: ActionType) => {
  switch (action.type) {
    case "add_Routers":
      state = action.value;
      return state;
    default:
      return state;
  }
};

export default reducer;

三.全局注册

app.tsx:

使用Provider包裹App.tsx组件，注入store

import "./App.css";
import React from "react";
import Routes from "./routes/index";
import store from "./stores";
import { Provider } from "react-redux";
const App = () => {
  return (
    <Provider store={store}>
      <Routes></Routes>
    </Provider>
  );
};

export default App;

四.发送action

import { useDispatch } from "react-redux";
import { addRouters } from "../../stores/action";


//下面两句要放在函数组件内
const dispatch = useDispatch();
dispatch(addRouters(data.routers))

五.接收state

import { useSelector } from "react-redux";

//这一句同样要放在函数组件内
const routers: any = useSelector((state) => state);

总结：主要运用了useDispatch、useSelector这两个Hook实现了react组件间的数据共享代替了老版的conncet