一步一步学习 ReactNative + Redux（5:异步Action）

最新推荐文章于 2018-05-02 22:05:34 发布
最新推荐文章于 2018-05-02 22:05:34 发布
阅读量413 收藏
点赞数
分类专栏： 【React-Native2点滴知识 】 【Redux Mobx Saga 点滴知识 】

写在开始

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

源码：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又熟悉了许多！！！

barnett_y
关注
专栏目录
新版ReactNative+Redux打造高质量上线APP系列课程.txt
03-08
### 新版ReactNative+Redux打造高质量上线APP系列课程知识点概览 #### 一、React Native简介与环境搭建 **知识点1：React Native简介** - **定义**：React Native是由Facebook开发的一个开源框架，用于构建原生...
react 实现 redux 异步action - web and native, redux同构（1）
weixin_33994429的博客
03-28 172
最近在公司做了一个webapp 用了react和redux 然后公司想用react-native 重构之前的app，而且要和webapp代码复用（主要是redux代码），界面还是web一套，native一套 项目结构问题 子模块 现在使用的是 git 的子模块功能，就相当于2个项目公用一个公共的目录 目录结构如下（common目录为子模块...
案例：React+Redux使用异步Action实现加减
mutong19890803的博客
12-21 2670
1.首先看一下项目结构 2.相关文件分析 1.1    public/index.html html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> div id="root">div> script src="/static/bundle.js">script>
react-native，redux，redux-saga组合开发实现
好好学习
12-24 4416
简单的说搞react开发的痛点之一，单向数据流的传递，redux统一管理数据，redux-saga又处理管理了异步调用。 要实现的内容如下，界面 目录结构 首先从请求接口入手，用axios封装请求接口，统一处理请求 axios.js import axios from 'axios' let defaultConfig = { timeout: 3000, } let ...
Redux PK Mobx，谁更适合管理大规模应用的前端状态？
小秋博客
06-28 7973
作者：龚麒，广发证券信息技术部高级前端工程师，负责广发证券金钥匙项目的React Native改造，及广发证券有问必答业务的微信小程序版的开发，在混合开发和各类跨端解决方案应用上具有丰富经验。 责编：陈秋歌（chenqg@csdn.net） 2017 年 7 月 8 日（星期六），「“CSDN前端开发”在线峰会」将在 CSDN 学院召开，龚麒已受邀参加，并围绕前端状态管理，深度分...
《React-Native系列》27、 Redux的异步数据流
等待就是浪费青春
09-08 4684
我们再前面讲的 redux 中的数据流都是同步的，流程如下：view -> actionCreator -> action -> reducer -> newState -> container component 但是，在大多数的前端业务场景中，需要和后端产生异步交互，譬如:网络api的请求。Redux中怎么来实现异步的数据流呢？异步Action通常我们创建的Action如下：export co
react-nativ-redux:React Ajay的Native Redux
04-17
在本文中，我们将深入探讨React Native与Redux的整合，特别是在Java环境下的应用。"React Native Redux"是一个项目，它展示了如何在React Native应用中利用Redux进行状态管理，从而实现更高效、可预测的代码。 首先...
belajar-redux:学习在React Native中使用Redux
04-28
在React Native中使用Redux是一个常见的做法，特别是在构建大型、复杂的应用程序时，因为Redux提供了一种强大而统一的方式来管理状态。Redux是一个JavaScript的状态容器，它实现了可预测化的状态管理。让我们深入...
react-native redux demo
09-01
React Native Redux Demo是一个基于React Native框架和Redux状态管理库的小型示例项目，旨在帮助开发者理解和实践这两种技术的结合。React Native是Facebook推出的开源库，它允许开发人员使用JavaScript和React来...
ReactNative-classtable:reactnative实现移动端课表
03-30
在“ReactNative-classtable”项目中，开发者利用React Native技术来实现了移动端的课表功能，这主要涉及到以下几个关键知识点： 1. **React Native基础知识**：React Native基于React.js，它将React的组件化思想...
React Native之Redux使用详解之Actions（29）
MN1107
07-10 6863
React Native之Redux使用详解（29）（一）前言1.1 简要介绍什么是React Native的Redux，其实简单理解就是为FaceBook为React Native应用开发专门开发的一套数据访问规则，其他不多说，这篇文章旨在说明怎么使用。1.2 三个规则1.2.1 单源 整个App的state呗存储在一个对象树中，即 Store。console.log(store.getS
React Native 性能优化之可取消的异步操作
fengyuzhengfan的专栏
09-08 6708
React Native 性能优化之可取消的异步操作本文出自《React Native 研究与实践》系列文章。概述在项目开发中离不了的需要进行一些异步操作，这些异步操作在改善用户体验的同时也带来了一些性能隐患。
React Native 中对Fetch网络请求框架的二次封装
zhuhuitao
05-02 974
RN中提供了fetch网络请求框架，使用起来已经很方便了，为了不重复写同样的代码，所以对其作了二次封装，使用起来感觉很方便。一，fetch封装：export default class FetchManager {    /*     *  get请求     *  url:请求地址     *  data:参数     *  callback:回调函数     * */    static ge...
WxParse-微信小程序富文本解析自定义组件，支持HTML和markdown解析.zip
10-04
WxParse-微信小程序富文本解析自定义组件，支持HTML和markdown解析
江苏科技大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-04
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
Chartjs微信小程序改编_Chartjs-wecat-mini-app.zip
10-04
Chartjs微信小程序改编_Chartjs-wecat-mini-app
kindeditor-4.1.12.zip
最新发布
10-04
网上好不容易找到的，特此分享。
基于Java语言的编程设计源码与小作品展示
10-04
该项目汇集了55个文件，涵盖Java编程语言的源码和小型作品，具体包括15个XML配置文件、13个Java源文件、12个Git忽略文件、6个IML项目文件、5个文档文件、2个Markdown文件、1个文档和1个PNG图像文件。这些文件构成了一个完整的Java开发资源包。
React+Redux实践：组件拆分与状态管理探讨
这通常涉及到使用特定的库如redux-form或react-redux-form来管理表单的生命周期，包括初始化、验证、提交等操作，同时也可能涉及如何将表单数据同步到Redux Store，以及如何通过Action Creator和Reducer来处理表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值