1.在store文件夾中創(chuàng)建一個ActionTypes.js文件
文件代碼如下:
export const CHANGE_INPUT_VALUE = 'chang_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELET_TODO_ITEM = 'delet_todo-item';
2.在TodoList.js文件中引入ActionTypes.js
import { CHANGE_INPUT_VALUE , ADD_TODO_ITEM , DELET_TODO_ITEM } from './store/ActionTypes.js';
3.把TodoList之前的action里的type全部換成大寫的
handleChange (e) {
const action = {
type : CHANGE_INPUT_VALUE,
value : e.target.value
}
store.dispatch(action);
}
handleAddList() {
const action = {
type : ADD_TODO_ITEM
}
store.dispatch(action)
}
handleDelet (index) {
const action = {
type : DELET_TODO_ITEM,
index
}
store.dispatch(action)
}
4.同時也需要替換掉reducer中的type
if(action.type === CHANGE_INPUT_VALUE) {
const newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if(action.type === ADD_TODO_ITEM) {
const newState = JSON.parse(JSON.stringify(state));
newState.List.push(newState.inputValue);
newState.inputValue='';
return newState;
}
if(action.type === DELET_TODO_ITEM) {
const newState = JSON.parse(JSON.stringify(state));
newState.List.splice(action.index,1);
return newState;
}