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

写在开始

到这里，我们对 ReactNative 、Redux ，以及中间件、异步Action 都相当了解。
这篇，我们会把 TODO 添加也改为异步Action。

源码：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

恭喜你！！！