一、什么是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;