确保Action派发的类型与Reducer中相应的case语句匹配,并在Reducer中返回一个更新后的新状态。
示例代码:
// action.js
export const ADD_ITEM = 'ADD_ITEM';
export function addItem(item) {
return {
type: ADD_ITEM,
payload: item,
};
}
// reducer.js
import { ADD_ITEM } from './action';
const initialState = {
items: [],
};
export default function reducer(state = initialState, action) {
switch (action.type) {
case ADD_ITEM:
return {
...state,
items: [...state.items, action.payload],
};
default:
return state;
}
}
// store.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
在这个示例中,我们定义了一个添加项的Action类型,以及一个将项添加到Redux状态中的Reducer。当我们使用store.dispatch(addItem('new item'))
派发一个添加项的Action时,Reducer中的ADD_ITEM
case语句将被调用,然后我们将新项添加到状态中并返回更新的状态。由于Action和Reducer类型之间的对应关系,这种断开行为可以避免。