在 Redux 状态下的对象中添加或删除对象,可以通过以下步骤实现:
以下是一个示例代码:
// 定义动作类型
const ADD_OBJECT = "ADD_OBJECT";
const REMOVE_OBJECT = "REMOVE_OBJECT";
// 创建动作创建函数
const addObject = (object) => {
return {
type: ADD_OBJECT,
payload: object
};
};
const removeObject = (objectId) => {
return {
type: REMOVE_OBJECT,
payload: objectId
};
};
// 定义 reducer 函数
const initialState = {
objects: []
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_OBJECT:
return {
...state,
objects: [...state.objects, action.payload]
};
case REMOVE_OBJECT:
return {
...state,
objects: state.objects.filter(obj => obj.id !== action.payload)
};
default:
return state;
}
};
// 创建 Redux store
const store = Redux.createStore(reducer);
// 连接组件到 Redux store
const mapStateToProps = (state) => {
return {
objects: state.objects
};
};
const mapDispatchToProps = (dispatch) => {
return {
addObject: (object) => dispatch(addObject(object)),
removeObject: (objectId) => dispatch(removeObject(objectId))
};
};
const ConnectedComponent = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(YourComponent);
在上面的示例中,我们定义了一个名为 objects
的状态数组,用于存储对象。addObject
函数用于创建一个添加对象的动作,removeObject
函数用于创建一个删除对象的动作。在 reducer 函数中,根据动作的类型来更新状态。最后,我们使用 connect
函数将组件连接到 Redux store,并通过 mapStateToProps
和 mapDispatchToProps
函数将状态和动作创建函数映射到组件的 props 中。
这是一个基本的示例,你可以根据你的具体需求进行修改和扩展。关于 Redux 的更多信息和用法,请参考 Redux 官方文档。
领取专属 10元无门槛券
手把手带您无忧上云