一步一步学习 ReactNative + Redux（6）

来源：互联网发布：value at risk python 编辑：程序博客网时间：2024/06/05 20:02

写在开始

到这里，我们对 ReactNative 、Redux ，以及中间件、异步Action 都相当了解。
这篇，我们会把 TODO 添加也改为异步Action。http://www.jianshu.com/p/0bab91ba74dd

源码：https://github.com/eylu/web-lib/tree/master/ReactReduxDemo/app_step6

调用远程接口，添加 TODO

我们要把 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;

运行项目，输入文字，点击添加按钮，看看是否显示到列表了？

Paste_Image.png

恭喜你！！！

0 0