当前位置: 首页 > article >正文

react基础之redux快速上手环境准备

在这里插入图片描述

文章目录

    • 核心概念
    • 配置基础环境
    • 提交action传参
    • 异步状态操作
    • redux调试-devtools
    • 配套工具


Redux 是一个状态管理库,通常与 React 一起使用,帮助开发者管理应用的全局状态。它的核心理念是将应用的状态存储在一个单一的、不可变的状态树中,并通过分发(dispatch)动作来更新状态。

核心概念

  1. Store
    存储应用的所有状态。应用中只有一个 Store,所有组件共享这个状态。

  2. Action
    一个描述发生什么的普通对象,通常包含一个 type 字段和可选的其他数据。比如:

    const ADD_TODO = {
        type: 'ADD_TODO',
        payload: { text: 'Learn Redux' }
    };
    
  3. Reducer
    纯函数,接受当前状态和动作,返回新的状态。Reducer 不应该修改原状态,而是返回一个新状态:

    function todosReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_TODO':
                return [...state, action.payload];
            default:
                return state;
        }
    }
    
  4. Dispatch
    用于发送 Action 到 Store,触发状态更新。

  5. Selector
    用于从 Store 中获取特定的状态片段,便于在组件中使用。

配置基础环境

配置 Redux 的基础环境通常包括以下步骤:

  1. 安装依赖

首先,确保你已经安装了 Node.js 和 npm,然后在项目目录中运行:
使用CRA快速创建React项目

npx create-react-app react-redux

安装配套工具

npm install @reduxjs/toolkit react-redux


出现以下内容就是安装成功

启动项目

npm run start
  1. Store目录设计

注:自己创建文件就好

1.通常集中状态管理的部分都会单独创建一个单独的store目录

2.应用通常会有很多个子store模块,所以创建一个modules目录,在内部编写业务分类的子store

3.store中的入口文件 index.js 的作用是组合modules中所有的子模块,并导出store

  1. 在react中添加Store数据

counterStore.js内容

import {
    createSlice
} from '@reduxjs/toolkit'

const counterStore = createSlice({
    name: 'counter',
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态方法 同步方法 支持直接修改
    reducers: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
    }

})


// 解构出来的actionCreater函数
const { increment, decrement } = counterStore.actions
// 获取reducer
const reducer=counterStore.reducer
// 按需导出的方法导出actionCreater
export {
    increment,
    decrement
}
//默认导出的方式导出reducer
export default reducer

在Store/index.js中添加

import { configureStore } from "@reduxjs/toolkit";
import combineReducers from './modules/counterStore'


const store= configureStore({
    reducer: {
        counter: combineReducers
    }
})

export default store

使用效果:
在src/index.js中添加

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

import store from './store';
import { Provider } from 'react-redux';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

在react组件中使用store的数据
用App.js举例

import { useSelector, useState } from 'react-redux';

function App() {
  const { count } =useSelector((state) => state.counter);
  return (
    <div className="App">
      {count}
    </div>
  );
}

export default App;

效果

  1. react组件修改store中的数据

在react组件修改store中的数据需要另外一个hook函数-useDispatch,主要作用是生成提交action对象的dispatch函数

在App.js中修改:

 import { useSelector, useDispatch } from 'react-redux';
import {increment,decrement} from './store/modules/counterStore'
function App() {
  const { count } =useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

export default App;

实现一个添加减少数据效果

添加效果

减少效果

提交action传参

在reducers的同步修改方法中添加action对象参数,在调用actionCreater的时候传递参数,参数会被传递到action对象payload属性上

用修改参数举例:
先在counterStore.js添加add

import {
    createSlice
} from '@reduxjs/toolkit'

const counterStore = createSlice({
    name: 'counter',
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态方法 同步方法 支持直接修改
    reducers: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
        add(state, action) {
            state.count += action.payload
        }
    }

})


// 解构出来的actionCreater函数
const { increment, decrement,add } = counterStore.actions
// 获取reducer
const reducer=counterStore.reducer
// 按需导出的方法导出actionCreater
export {
    increment,
    decrement,
    add
}
//默认导出的方式导出reducer
export default reducer

然后在app.js添加修改按钮

<button onClick={() => dispatch(add(count+20))}>+20</button>

效果:

异步状态操作

redux调试-devtools

配套工具

  1. Redux Toolkit
  • 描述:Redux 官方推荐的工具集,用于简化 Redux 的使用。它提供了更简单的 API 来创建 Store、Reducer 和 Action,减少了样板代码。
  • 特点:支持“切片”概念、内置的异步处理和更好的开发体验。
  1. React-Redux
  • 描述:将 Redux 与 React 结合的官方库。
  • 特点:提供 Provider 组件和 connect 函数,简化组件与 Redux Store 的连接。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。


http://www.kler.cn/a/372797.html

相关文章:

  • C++第4课——swap、switch-case-for循环(含视频讲解)
  • 输出特殊图案,请在c环境中运行
  • 使用C#学习Office文件的处理(pptx docx xlsx)
  • 三周精通FastAPI:24 OAuth2 实现简单的 Password 和 Bearer 验证
  • android 12 禁止三方APP 使用API 直接打开wifi的修改方法
  • 从理解路由到实现一套Router(路由)
  • 【Docker知识】Docker进阶-容器镜像深度解读
  • SQL 高级技巧
  • BERT的中文问答系统23
  • 使用Virtual Audio Cable捕获系统音频输出并使用Python处理
  • pc电脑屏幕分辨率尺寸
  • MetaArena推出《Final Glory》:引领Web3游戏技术新风向
  • Flutter鸿蒙next 封装对话框详解
  • 实现链式结构的二叉树
  • C++ 之 VS2010 和MySQL数据库的链接问题
  • 【K8S系列】Kubernetes 中 Service 无法访问及解决方案【已解决】
  • 单片机如何入门?
  • Android adb命令获取设备id
  • CentOS 9 Stream 上安装 Visual Studio Code
  • Go语言八股(Ⅲ)
  • C#与C++交互开发系列(十四):C++中STL容器与C#集合传递的形式
  • lvm故障小贴士
  • 响应报文时间
  • CPB数据集:由斯坦福大学发布,一个新的视频问题回答任务基准,能够连续且全面处理视频数据
  • Golang | Leetcode Golang题解之第521题最长特殊序列I
  • C#与C++交互开发系列(十七):线程安全