美文网首页redux学习React Native开发经验集react-native
一步一步学习 ReactNative + Redux（5:异步A

一步一步学习 ReactNative + Redux（5:异步A

作者: EyluWang | 来源:发表于2016-12-22 11:10 被阅读512次

    写在开始

    经过多天的奋战，我们对 ReactNative 、 Redux 以及之间的数据流已经相当了解，并且我们还能在其中增加中间件，以实现延迟（异步）调用。

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

    开发

    这里，我们将完成真正的异步请求！
    我们的任务如下：
    1、请求远程数据，并显示 TODO 列表（替代初始数据）
    2、TODO 状态的切换，改为远程修改

    服务端

    服务端（server）使用的 Ruby 、Grape 做为 Api 接口，提供远程数据和操作。
    你应该已经写好了类似于下面样式的接口了。

    获取 TODO 列表： GET     http://192.168.x.x:3000/api/list_message            参数: 无
新建 TODO    ： POST    http://192.168.x.x:3000/api/add_message             参数: {message: 'TODO项目'}
切换 TODO 状态： PUT     http://192.168.x.x:3000/api/toggle_message_status   参数: {id: TODO的id}

    redux-thunk

    这是一个已经写好的中间件，我们可以直接使用它。

    安装 redux-thunk

    npm install redux-thunk --save

    使用 redux-thunk

    import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const finalCreateStore = applyMiddleware(thunk)(createStore);   
let store = finalCreateStore(reducers);

    它可以代替完成我们自己写的中间件

    var thunkMiddleware = function ({ dispatch, getState }) {
    ...
}

    现在，我们来看一下目录结构与依赖包：

    |--ReactReduxDemo
    |--__tests__
    |--android
    |--app
        |--actions
            |--index.js
        |--components
            |--todo-filter.component.js
            |--todo-form.component.js
            |--todo-list.component.js
        |--config
            |--enum.js
        |--containers
            |--home.container.js
        |--reducers
            |--index.js
        |--index.js
    |--ios
    |--node_modules
    |--index.android.js
    |--index.ios.js
    |--package.json
    |--...

    package.json 依赖如下：

    {
    "name": "ReactReduxDemo",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "15.4.1",
        "react-native": "0.38.0",
        "react-redux": "^4.4.6",
        "redux": "^3.6.0",
        "redux-thunk": "^2.1.0"
    },
    "jest": {
        "preset": "react-native"
    },
    "devDependencies": {
        "babel-jest": "17.0.2",
        "babel-preset-react-native": "1.9.0",
        "jest": "17.0.3",
        "react-test-renderer": "15.4.1"
    }
}

    请求远程 TODO 数据列表

    我们要使用 redux-thunk 这个中间件。
    我们把 fetch 封装一下 以便我们更能简单使用，让它来请求远程数据（新添加一个ActionCreator）

    1、使用 redux-thunk

    ReactReduxDemo/app/index.js 文件，修改如下：

    import React, { Component } from 'react';
import {
    View,
    StyleSheet,
} from 'react-native';
import { createStore, applyMiddleware } from 'redux';        
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';                                  // 引入 thunk

import { FILITER_KEYS } from './config/enum';
import reducers from './reducers/index';

import HomeContainer from './containers/home.container';

// var thunkMiddleware = function ({ dispatch, getState }) {        // 这里的中间件不再使用
//     ...
// }

// 这是初始数据
const initState = {
    todos: [
        {id:1,title:'吃早饭',status:true},
        {id:2,title:'打篮球',status:false},
        {id:3,title:'修电脑',status:false},
    ],
    filter: FILITER_KEYS.ALL,
};

const finalCreateStore = applyMiddleware(thunk)(createStore);        // 中间件替换为 thunk
let store = finalCreateStore(reducers, initState);                   
// let store = createStore(reducers, initState);

export default class RootWrapper extends Component{
    render(){
        return (
            <Provider store={store}>
                <View style={styles.wrapper}>
                    <HomeContainer />
                </View>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        marginTop: 20,
    },
});

    2、封装 Fetch

    这里是对 fetch 的简单封装，它接收 action 、params(Options) 、method（Options,http method,默认为GET）。
    当然，你会有你自己的服务端接口，所以，你应该封装为适合自己服务端的调用方式。

    新建文件 ReactReduxDemo/app/utils/fetch-data.js，如下：

    export default function fetchData(action, params, method='get'){
    return fetch('http://192.168.1.196:3000/api/'+action,{
        method: method,
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        },
        body: params ? JSON.stringify(params) : null
    })
    .then((response)=>{
        return response.json()
    });
}

    3、调用远程数据

    fetch 工具封装好，中间件 thunk 已使用。我们可以调用远程数据了。数据的提供是在容器组件，所以我们修改容器组件 HomeContainer

    ReactReduxDemo/app/containers/home.container.js 文件，修改如下：

    import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';
import { connect } from 'react-redux';

import { FILITER_KEYS } from '../config/enum';
import { initTodoList, changeTodoStatus, addNewTodo, filterTodoList } from '../actions/index';     // 引入新的 ActionCreator ：initTodoList

import TodoFormComponent from '../components/todo-form.component';
import TodoListComponent from '../components/todo-list.component';
import TodoFilterComponent from '../components/todo-filter.component';

class HomeContainer extends Component{
    constructor(props){
        super(props);
    }

    componentDidMount(){                   // 组件 mount 之后调用数据
        let { dispatch } = this.props;
        dispatch(initTodoList());          // 执行调用方法
    }

    addTodo(text){
        let { dispatch } = this.props;
        dispatch(addNewTodo(text));
    }

    toggleTodo(id){
        let { dispatch } = this.props;
        dispatch(changeTodoStatus(id));
    }

    filterTodo(filter){
        let { dispatch } = this.props;
        dispatch(filterTodoList(filter));
    }

    render(){
        return (
            <View>
                <TodoFormComponent addTodo={(text)=>{this.addTodo(text)}} />
                <TodoListComponent todoList={this.props.todoList} toggleTodo={(id)=>{this.toggleTodo(id)}} />
                <TodoFilterComponent filter={this.props.currentFilter} filterTodo={(filter)=>{this.filterTodo(filter)}} />
            </View>
        );
    }
}

const getFilterTodos = (todos, filter) => {
  switch (filter) {
    case FILITER_KEYS.ALL:
      return todos;
    case FILITER_KEYS.UNDO:
      return todos.filter( todo => !todo.status);
    case FILITER_KEYS.FINISH:
      return todos.filter( todo => todo.status);
    default:
      throw new Error('Unknown filter: ' + filter);
  }
}

// 基于全局 state ，哪些 state 是我们想注入的 props
function mapStateToProps(state){
    var list = getFilterTodos(state.todos, state.filter);
    return {
        todoList: list,
        currentFilter: state.filter,
    }
}

export default connect(mapStateToProps)(HomeContainer);

    4、添加新的 ActionCreator

    ReactReduxDemo/app/actions/index.js 文件，修改如下：

    /*********************************** action 类型常量 *************************************/

import fetchData from '../utils/fetch-data';            // 引入 fetch 工具

export const INIT_TODO_LIST = 'INIT_TODO_LIST';         // 定义新的 action 类型
/**
 * 更改 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(){                       // 定义新的 action creator
    return function(dispatch){
        fetchData('list_message').then((data)=>{      // 使用 fetch 调用远程数据
            dispatch({                                // 执行 dispatch(action)
                type: INIT_TODO_LIST,
                list: data,
            })
        });
    }
}

/**
 * 更改 TODO 状态
 * @param  {Number} id TODO索引
 * @return {Object}       action
 */
export function changeTodoStatus(id){
    return function (dispatch){                        
        setTimeout(()=>{                               
            dispatch({type: TOGGLE_TODO_STATUS, id});  
        }, 2000);
    }
    // return {type: TOGGLE_TODO_STATUS, id};
}

export function addNewTodo(text){
    return {type: ADD_NEW_TODO, text};
}

export function filterTodoList(filter){
    return {type: SET_FILTER, filter};
};

    5、修改 reducer

    ActionCreator 已经写好，可以执行 dispatch，并且可以获取 fetch 远程数据了。我们还要响应 reducer ,以将数据显示出来。

    import { combineReducers } from 'redux';

import { INIT_TODO_LIST, TOGGLE_TODO_STATUS, ADD_NEW_TODO, SET_FILTER } from '../actions/index';    // 引入 INIT_TODO_LIST


function todoList(state=[], action){
    switch(action.type){
        case INIT_TODO_LIST:                             // 添加新的 action 类型分支，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: !todo.status
                }),
                ...state.slice(index + 1)
            ];
        case ADD_NEW_TODO:
            return [
                ...state,
                {
                    id: state.length+1,
                    title: action.text,
                    status: false,
                }
            ];
        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;

    运行项目，看看是否能够显示新的数据了？如果显示，OK，太棒了。

    Paste_Image.png

    好了，我们将 store 初始数据 todos 删掉吧

    ReactReduxDemo/app/index.js 文件，修改如下:

    ....
// 这是初始数据
const initState = {
    // todos: [                                     // 这里的数据注释掉
    //     {id:1,title:'吃早饭',status:true},
    //     {id:2,title:'打篮球',status:false},
    //     {id:3,title:'修电脑',status:false},
    // ],
    filter: FILITER_KEYS.ALL,
};
....

    TODO 状态切换，调用远程接口

    记得之前我们的 TODO 状态切换是同步执行，之后，修改为延迟执行(setTimeout)。
    现在，我们要把它修改为调用远程接口。

    1、修改 ActionCreator

    我们要把 changeTodoStatus 这个 ActionCreator 的 setTimeout 修改为 fetchData 来调用远程接口。
    我们要调用 toggle_message_status 这个接口，传递的数据为 {id: TODO的id} ，使用的 HttpMethod 为 PUT。
    远程数据会返回 TODO 的当前 status，所以，我们会将 dispatch 稍微修改一下。

    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)=>{        // 把 setTimeout 修改为 fetchData
            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 {type: ADD_NEW_TODO, text};
}

export function filterTodoList(filter){
    return {type: SET_FILTER, filter};
};

    2、修改 reducer

    我们通过远程接口修改了 TODO 的状态，并返回了最新的状态。
    我们要将 reducer 中对应的操作修改，不再只是简单的状态相反操作，而是使用 action 中所带来的状态。

    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                    // action 所对应 id 的 TODO 状态(status)，修改为 action 数据中的 status
                }),
                ...state.slice(index + 1)
            ];
        case ADD_NEW_TODO:
            return [
                ...state,
                {
                    id: state.length+1,
                    title: action.text,
                    status: false,
                }
            ];
        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;

    TODO 状态的远程切换到这里就OK了。运行项目，看看是否依然可以切换状态呢？

    Paste_Image.png

    恭喜你，对异步Action又熟悉了许多！！！

    相关文章

      网友评论

        本文标题：一步一步学习 ReactNative + Redux（5:异步A

        本文链接：https://www.haomeiwen.com/subject/yruqvttx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        redux学习

        React Native开发经验集

        react-native

        ReactNative调研

        关于我们|服务条款|联系我们|一步一步学习 ReactNative + Redux（5:异步A|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！