第45节——页面中修改redux里的数据

一、什么是action

在 Redux 中,Action 是一个简单的 JavaScript 对象,用于描述对应应用中的某个事件(例如用户操作)所发生的变化。它包含了一个 type 属性,用于表示事件的类型,以及其他一些可选的数据。

Action 可以被 Redux Store 中的 reducer 函数捕获并处理,从而对应用的状态进行更新。通过使用 Action,可以实现可预测、可追踪和可测试的应用状态管理。

二、什么是reducer

Reducer 是 Redux 中的一个概念,它是一个纯函数,用于处理应用的状态变更。Reducer 的输入是当前状态和一个操作(action),输出是下一个状态。

在 Redux 中,所有的状态变更都必须通过发送一个 action 实现。每一个 action 都是一个描述状态变更的对象,包含了一个 type 属性和一些其他属性。当一个 action 被发送到 store,它会触发 store 对应的 reducer,使用当前状态和 action 来生成下一个状态。

三、action的基本语法

jsx 复制代码
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  /*
    调用一下useDispatch返回一个dispatch方法
  */
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
       {/* 
        调用这个方法必须要传一个对象
        对象里面一般来说包含两个属性
        type 代表发起的操作,通过reducer 执行不同的逻辑
        payload 这是一个抽象意义的字段,代表传值
        每个type不能重复
      
      */}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

export default Counter;

四、命名空间模块

使用命名空间模块管理type的值

创建一个namespace目录并创建user.js

jsx 复制代码
const moduleName = "goods";

const generateType = (name) => {
  return `${moduleName}/${name}`;
};

export const SAVE = generateType("save");

四、在页面中发起一个dispatch调用对应的reducer修改数据

1、定义一个user模块,并编写更新用户名的方法

jsx 复制代码
import { UPDATE_NAME } from './../namespace/user'

const defaultState = {
  name: "李光明",
  age: 20,
};

export const userReducer = (state = defaultState, action) => {
  switch (action.type) {
    /**
     * reducer模块化后命名
     * 一般要求全局唯一
     * 一般来可以采用模块名/case名的方式
     */
    case UPDATE_NAME:
      return {...state, ...action.payload}
    default:
      return state;
  }
};

2、store.js文件中修改

jsx 复制代码
/**
 * 由于在redux4.x 版本createStore已经被废弃
 * 但是 createStore 相对来说对我们了解redux有比较重要
 * 那么,我们就引入legacy_createStore 这个方法
 * 然后给他重命名redux 就可以正常使用createStore
 * 后面我们会着重讲新版redux的用法
 *
 */
import { legacy_createStore as createStore, combineReducers } from "redux";
import user from "./user";

const rootReducer = combineReducers({
  user,
});

// 创建 store
const store = createStore(rootReducer);

// 导出 store
export default store;

3、页面中使用dispatch出发reducer修改state

jsx 复制代码
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { UPDATE_NAME } from './../namespace/user'

function UserInfo() {
  const state = useSelector((state) => state.user);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Name: {state.name}</p>
      <button
        onClick={() =>
          dispatch({
            type: UPDATE_NAME,
            name: "李四 ",
          })
        }
      >
        修改名字为李四
      </button>
    </div>
  );
}

export default UserInfo;
相关推荐
weixin_4378309411 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮11 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel12 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip12 小时前
JavaScript事件流
前端·javascript
小菜全13 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C13 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG13 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042713 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路13 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa13 小时前
HTML和CSS学习
前端·css·学习·html