在 Redux 中,我们可以使用 dispatch
函数将一个数组元素推送到 Redux 状态中。下面是一个代码示例:
// 定义一个 reducer 函数,用于处理状态变化
const reducer = (state = [], action) => {
switch (action.type) {
case 'PUSH_TO_STATE':
return [...state, action.payload]; // 将 action.payload 添加到状态数组中
default:
return state;
}
};
// 创建 Redux store
const store = Redux.createStore(reducer);
// 定义一个 action 创建函数,用于创建推送数组元素的 action
const pushToState = (element) => {
return {
type: 'PUSH_TO_STATE',
payload: element
};
};
// 使用 dispatch 函数将数组元素推送到 Redux 状态中
store.dispatch(pushToState('Hello')); // 推送元素 'Hello' 到状态数组中
store.dispatch(pushToState('World')); // 推送元素 'World' 到状态数组中
console.log(store.getState()); // 输出状态数组:['Hello', 'World']
在上面的示例中,我们首先定义了一个 reducer 函数来处理状态变化。然后,我们创建了一个 Redux store,并使用 createStore
函数将 reducer 函数传递给它。接下来,我们定义了一个 action 创建函数 pushToState
,它接受一个元素作为参数,并返回一个包含 type
和 payload
属性的对象。然后,我们使用 dispatch
函数将创建的 action 对象传递给 store,从而将元素推送到状态数组中。最后,我们可以使用 getState
函数来获取当前的状态数组,并在控制台上输出它。
请注意,Redux 的状态是不可变的,因此我们在 reducer 中使用了扩展运算符 ...
来创建一个新的数组,以便在原始数组的基础上添加新的元素。这是为了避免直接修改原始状态数组。