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

文章目录


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

核心概念

  1. Store

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

  2. Action

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

    javascript 复制代码
    const ADD_TODO = {
        type: 'ADD_TODO',
        payload: { text: 'Learn Redux' }
    };
  3. Reducer

    纯函数,接受当前状态和动作,返回新的状态。Reducer 不应该修改原状态,而是返回一个新状态:

    javascript 复制代码
    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项目

bash 复制代码
npx create-react-app react-redux

安装配套工具

bash 复制代码
npm install @reduxjs/toolkit react-redux

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

启动项目

bash 复制代码
npm run start
  1. Store目录设计

注:自己创建文件就好

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

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

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

  1. 在react中添加Store数据

counterStore.js内容

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中添加

js 复制代码
import { configureStore } from "@reduxjs/toolkit";
import combineReducers from './modules/counterStore'


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

export default store

使用效果:

在src/index.js中添加

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举例

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中修改:

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

js 复制代码
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添加修改按钮

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 的连接。

您好,我是肥晨。

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

相关推荐
掘金一周4 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i6 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd8 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE9 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
Hilaku9 分钟前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
OLong12 分钟前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
江城开朗的豌豆12 分钟前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
闲坐含香咀翠12 分钟前
记一次交互优化:从根源上解决Axios请求竞态问题
前端·http·浏览器
摸鱼仙人~18 分钟前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
小小小小宇18 分钟前
ResizeObserver 和 IntersectionObserver
前端