功能实现
本篇继续:
不同action的不同type +
创建action的函数实现 +
接受并处理各个action +
(以上是store部分,以下是TodoList功能部分)
实现输入与数据state的同步更新 +
实现向list里添加Todoitem +
实现从list里删除某个Todoitem项 ;
不同action的不同type
在 actionTypes.js 文件中,定义一系列action的type变量
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_ITEM = 'add_item';
export const DELETE_ITEM = 'delete_item';
创建action的函数实现
在 actionCreator.js 文件中,引用上述变量,实现各个不同action的创建
import { CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM } from './actionTypes';
export const inputAction = (inputValue) => {
return ({
type: CHANGE_INPUT_VALUE,
inputValue
})
}
export const addAction = (inputValue) => {
return ({
type: ADD_ITEM,
inputValue
})
}
export const deleteAction = (index) => {
return ({
type: DELETE_ITEM,
index
})
}
接受并处理各个action
在 reducer.js 文件中,引入事先定义的各个action的type变量
import { CHANGE_INPUT_VALUE, ADD_ITEM, DELETE_ITEM } from './actionTypes';
接下来对不同type的action进行验证并处理
export default (state = defaultState, action) => {
if( action.type === CHANGE_INPUT_VALUE ){
const newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.inputValue;
return newState;
}
if( action.type === ADD_ITEM ){
const newState = JSON.parse(JSON.stringify(state));
newState.list.push(action.inputValue);
newState.inputValue = '';
return newState;
}
if( action.type === DELETE_ITEM ){
const newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.index, 1);
return newState;
}
return state;
}
以下实现TodoList功能部分,首先在 TodoList.js 文件中引入各个创建action的函数
import { inputAction, addAction, deleteAction } from './store/actionCreator';
store.dispatch() 函数会将内容传给store,store会转发给reducer处理
实现输入与数据state的同步更新
inputChanged() + inputAction:实现输入与页面数据state的同步更新;
inputChanged(e) {
const action = inputAction(e.target.value);
store.dispatch(action);
}
实现向list里添加Todoitem
addItem() + addAction:实现向list里添加Todoitem;
addItem() {
const action = addAction(this.state.inputValue);
store.dispatch(action);
}
实现从list里删除某个Todoitem项
deleteItem() + deleteAction:实现从list里删除某个Todoitem项;
deleteItem(index) {
const action = deleteAction(index);
store.dispatch(action);
}