在Redux中,reducer是一个纯函数,用于处理应用程序的状态变化。它接收先前的状态和一个action作为参数,并返回一个新的状态对象。当我们需要将新的数据添加到数组中而不是覆盖它时,我们可以通过以下步骤来更新reducer。
const initialState = {
data: []
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TO_ARRAY':
return {
...state,
data: [...state.data, action.payload]
};
default:
return state;
}
};
在上面的代码中,我们定义了一个ADD_TO_ARRAY
的action类型,当这个action被触发时,reducer会将action.payload
添加到state.data
数组中。
createStore
函数来创建一个store,并将reducer传递给它。import { createStore } from 'redux';
const store = createStore(reducer);
现在,当我们想要将新的数据添加到数组中时,我们可以通过dispatch一个包含ADD_TO_ARRAY
类型和相应payload的action来触发reducer的更新。
store.dispatch({ type: 'ADD_TO_ARRAY', payload: newData });
这样,reducer就会将newData
添加到state.data
数组中,而不是覆盖它。
总结:
领取专属 10元无门槛券
手把手带您无忧上云