在 Redux 中,reducer 是一个纯函数,用于管理应用状态的更新。reducer 接收两个参数:当前状态(state)和 action,根据 action 的类型来更新状态并返回新的状态。
要将对象添加到 reducer 数组中,首先需要定义一个 action,该 action 包含要添加的对象的信息。例如:
const addObject = (object) => {
return {
type: 'ADD_OBJECT',
payload: object
}
}
上述代码中,addObject
是一个 action 创建函数,返回一个包含 type
和 payload
的对象。type
表示 action 的类型,payload
包含要添加的对象的信息。
接下来,在 reducer 中处理该 action。首先,需要在初始状态中定义一个数组,用于存储对象:
const initialState = {
objects: []
}
然后,根据传入的 action 类型,对状态进行更新。在这个例子中,我们处理 ADD_OBJECT
类型的 action:
const reducer = (state = initialState, action) => {
switch(action.type) {
case 'ADD_OBJECT':
return {
...state,
objects: [...state.objects, action.payload]
}
default:
return state;
}
}
在上述代码中,通过使用扩展运算符(...
)来创建新的状态对象,并在 objects
数组中添加新的对象。
最后,将 reducer 应用到 Redux store 中,使其可以管理应用的状态:
import { createStore } from 'redux';
const store = createStore(reducer);
现在,你可以在组件中使用 store.dispatch()
方法来分发 addObject
action,从而将对象添加到 reducer 数组中:
import { useDispatch } from 'react-redux';
import { addObject } from 'actions';
const MyComponent = () => {
const dispatch = useDispatch();
const handleAddObject = () => {
const object = { name: 'example' }; // 替换为你要添加的对象
dispatch(addObject(object));
}
return (
<button onClick={handleAddObject}>添加对象</button>
);
}
在上述代码中,使用 useDispatch
hook 获取 dispatch
方法,并在点击按钮时分发 addObject
action,并传入要添加的对象。
这样,当点击按钮时,Redux store 中的状态会更新,对象会被添加到 reducer 数组中。
领取专属 10元无门槛券
手把手带您无忧上云