本文共 3807 字,大约阅读时间需要 12 分钟。
到这里,我们对 ReactNative 、Redux ,以及中间件、异步Action 都相当了解。
这篇,我们会把 TODO 添加也改为异步Action。http://www.jianshu.com/p/0bab91ba74dd
源码:
我们要把 addNewTodo
这个 ActionCreator
使用 fetchData
改写,还需要将对应的 reducer
进行相应的调整,使用服务器返回的 TODO 数据添加到 TODO 列表。
1、修改 ActionCreator
将 addNewTodo
使用 fetchData
改写,调用 add_message
这个远程接口,传入 {message: text}
数据, 使用 HttpMethod
的 POST
方式。
返回数据后再执行 diapatch
,并把返回的数据一并传入 diapatch
。
ReactReduxDemo/app/actions/index.js
文件,修改如下:
/*********************************** action 类型常量 *************************************/import fetchData from '../utils/fetch-data';export const INIT_TODO_LIST = 'INIT_TODO_LIST';/** * 更改 TODO 状态 * @type {String} */export const TOGGLE_TODO_STATUS = 'TOGGLE_TODO_STATUS';export const ADD_NEW_TODO = 'ADD_NEW_TODO';export const SET_FILTER = 'SET_FILTER';/*********************************** action 创建函数 *************************************/export function initTodoList(){ return function(dispatch){ fetchData('list_message').then((data)=>{ dispatch({ type: INIT_TODO_LIST, list: data, }) }); }}/** * 更改 TODO 状态 * @param {Number} id TODO索引 * @return {Object} action */export function changeTodoStatus(id){ return function (dispatch){ fetchData('toggle_message_status', { id: id}, 'PUT').then((data)=>{ dispatch({type: TOGGLE_TODO_STATUS, status: data, id}) }); // setTimeout(()=>{ // dispatch({type: TOGGLE_TODO_STATUS, id}); // }, 2000); } // return {type: TOGGLE_TODO_STATUS, id};}export function addNewTodo(text){ return function(dispatch){ fetchData('add_message', {message: text}, 'POST').then((data)=>{ // 使用 fetchData 调用远程接口,传递数据 dispatch({type: ADD_NEW_TODO, todo: data}) // 返回数据后 dispatch(action) ,并将数据传递 }); } // return {type: ADD_NEW_TODO, text};}export function filterTodoList(filter){ return {type: SET_FILTER, filter};};
2、修改 Reducer
远程添加 TODO 后,dispatch
的时候将 TODO 数据带到 reducer
中,我们要修改对应的处理,将 TODO 数据添加到列表。
ReactReduxDemo/app/reducers/index.js
文件,修改如下:
import { combineReducers } from 'redux';import { INIT_TODO_LIST, TOGGLE_TODO_STATUS, ADD_NEW_TODO, SET_FILTER } from '../actions/index';function todoList(state=[], action){ switch(action.type){ case INIT_TODO_LIST: return [ ...state, ...action.list.map((todo)=>{ return { id: todo.id, title: todo.title, status: todo.status, }}) ]; case TOGGLE_TODO_STATUS: var index = state.findIndex((todo)=>{ return todo.id==action.id }); var todo = state.find((todo)=>{ return todo.id==action.id }); return [ ...state.slice(0, index), Object.assign({}, todo, { status: action.status }), ...state.slice(index + 1) ]; case ADD_NEW_TODO: // 对 ADD_NEW_TODO action 稍作修改 var todo = action.todo; // 获取 action 中的 todo 数据 return [ ...state, { id: todo.id, // 替换 id title: todo.title, // 替换 title status: todo.status, // 替换 status } ]; default : return state; }}function setFilter(state='', action){ switch(action.type){ case SET_FILTER: return action.filter; default : return state; }}const reducers = combineReducers({ todos: todoList, filter: setFilter,});export default reducers;
运行项目,输入文字,点击添加按钮,看看是否显示到列表了?
恭喜你!!!
转载地址:http://egeni.baihongyu.com/