第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的基本语法

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

const moduleName = "goods";const generateType = (name) => {return `${moduleName}/${name}`;
};export const SAVE = generateType("save");

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

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

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文件中修改

/*** 由于在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

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><buttononClick={() =>dispatch({type: UPDATE_NAME,name: "李四 ",})}>修改名字为李四</button></div>);
}export default UserInfo;