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

最新推荐文章于 2020-09-10 09:14:57 发布

barnett_y

最新推荐文章于 2020-09-10 09:14:57 发布

阅读量380

点赞数

分类专栏：【React-Native2点滴知识】【Redux Mobx Saga 点滴知识】

【React-Native2点滴知识】同时被 2 个专栏收录

698 篇文章 30 订阅

订阅专栏

【Redux Mobx Saga 点滴知识】

178 篇文章 0 订阅

订阅专栏

写在开始

上篇中，我们搭建了 ReactNative ＋ Redux 的结构、显示了初始数据。http://www.jianshu.com/p/adf8886f5408
这篇，我们需要做状态更改了，即 dispatch(action) 。

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

开发

这里，我们的任务如下：

给 TODO 项添加点击事件，点击后，切换 TODO 的状态(status:true|false) ；
新建一个组件TodoForm.component，可以添加新的 TODO 项。

TODO 状态切换

1、使用 TouchableOpacity

这里我们只是给子组件 TodoListComponent 添加了点击事件，没有什么特别之处。

ReactReduxDemo/app/components/todo-list.component.js 文件，做如下修改：

import React, { Component } from 'react';
import {
    Text,
    View,
    StyleSheet,
    TouchableOpacity,         // 引入 TouchableOpacity
} from 'react-native';

export default class TodoListComponent extends Component{
    constructor(props){
        super(props);
    }

    toggleTodo(index){       // 点击事件，通过 props.method 调用容器组件的方法
        this.props.toggleTodo && this.props.toggleTodo(index);
    }

    render(){
        return (
            <View style={styles.wrapper}>
            {this.props.todoList.map((todo, index)=>{
                var finishStyle = {textDecorationLine:'line-through', color:'gray'};
                return (
                    <TouchableOpacity onPress={()=>{this.toggleTodo(index)}}>    // 这里使用了 TouchableOpacity，并添加了点击事件（注释会报错，请删除注释）
                        <Text style={[styles.todo,todo.status&&finishStyle]}>{todo.title}</Text>
                    </TouchableOpacity>
                );
            })}
            </View>
        );
    }
}


const styles = StyleSheet.create({
    wrapper: {
        paddingHorizontal: 20,
    },
    todo: {
        paddingVertical: 5,
    },
});

2、使用 dispatch

子组件 TodoListComponent 的点击事件已完成，通过 props 调用容器组件的方法。容器组件 HomeContainer 调用 dispatch(action) 。

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

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

import { changeTodoStatus } from '../actions/index';  // 引入 action  

import TodoListComponent from '../components/todo-list.component';

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

    toggleTodo(index){                              
        let { dispatch } = this.props;              // 从 props 里解构出 dispatch
        dispatch(changeTodoStatus(index));          // 执行 dispatch(action)
    }

    render(){
        return (
            <View>
                <TodoListComponent todoList={this.props.todoList} toggleTodo={(index)=>{this.toggleTodo(index)}} />  // 这里添加了新 props toggleTodo （注释会报错，请删除注释）
            </View>
        );
    }
}

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

export default connect(mapStateToProps)(HomeContainer);

3、创建 action

这里，我们使用方法创建 action ，并将 action 的 type 字段全部使用常量（不直接使用字符串，方便统一管理与多处引用）

新建文件 ReactReduxDemo/app/actions/index.js，如下：

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

/**
 * 更改 TODO 状态
 * @type {String}
 */
export const TOGGLE_TODO_STATUS = 'TOGGLE_TODO_STATUS';

/*********************************** action 创建函数 *************************************/

/**
 * 更改 TODO 状态
 * @param  {Number} index TODO索引
 * @return {Object}       action
 */
export function changeTodoStatus(index){
    return {type: TOGGLE_TODO_STATUS, index};
}

4、使用 reducer 更新 state

还没完，我们创建了action，并且派发了action。但是，还没有响应action。我们需要用reducer响应action，并返回新的state。

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

import { combineReducers } from 'redux';

import { TOGGLE_TODO_STATUS } from '../actions/index';    // 引入 action ，使用 action 类型常量


function todoList(state=[], action){
    switch(action.type){                                  // 匹配响应 action，创建并返回新的 state (注意，不能修改state)
        case TOGGLE_TODO_STATUS:
            var todo = state[action.index];
            return [
                ...state.slice(0, action.index),
                Object.assign({}, todo, {
                  status: !todo.status
                }),
                ...state.slice(action.index + 1)
            ];
        default :                                         // 在没有匹配到 action 时，返回原始state
            return state;
    }

}

const reducers = combineReducers({
    todos: todoList
});

export default reducers;

好了，到现在为止，我们已经将 ReactNative 与 Redux 连接了起来，并响应了点击事件。
运行项目，点击 TODO 项，看看是否可以状态切换了呢。

Paste_Image.png

添加新 TODO 项

到现在，如果对 Redux 还不太熟悉，没关系。
接下来，我们再来梳理与巩固一下 Redux 工作流。

1、新建子组件 TodoFormComponent

它有一个输入框、一个按钮，输入过程中，将输入对文字存入自己的 state，点击按钮，调用 props 的父组件（容器组件）方法。

新建文件 ReactReduxDemo/app/components/todo-form.component.js，如下：

import React, { Component } from 'react';
import {
    View,
    TextInput,
    Button,
    StyleSheet,
} from 'react-native';


export default class TodoFormComponent extends Component{
    constructor(props){
        super(props);
        this.state = {
            todo: null,
        };
    }

    addTodo(){
        this.props.addTodo && this.props.addTodo(this.state.todo);    // 调用父组件方法
    }

    setTodo(text){
        this.setState({
            todo: text
        });
    }

    render(){
        return (
            <View style={styles.wrapper}>
                <TextInput style={styles.input} onChangeText={(text)=>{this.setTodo(text)}} />
                <Button title="添加" onPress={()=>this.addTodo()} />
            </View>
        );
    }
}


const styles = StyleSheet.create({
    wrapper: {
        paddingHorizontal: 10,
        flexDirection: 'row',
    },
    input: {
        height: 30,
        borderColor: 'gray',
        borderWidth: 1,
        flex: 1,
    },
});

没有什么特别，只是一个 React 组件。

2、使用 dispatch

容器组件HomeContainer引入子组件，并定义添加新 TODO 项的方法，执行 dispatch

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

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

import { changeTodoStatus, addNewTodo } from '../actions/index';   // 引入新 action

import TodoFormComponent from '../components/todo-form.component'; // 引入组件
import TodoListComponent from '../components/todo-list.component';

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

    addTodo(text){
        let { dispatch } = this.props;             // 从 props 里解构出 dispatch
        dispatch(addNewTodo(text));                // 执行 dispatch(action)
    }

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

    render(){
        return (
            <View>
                <TodoFormComponent addTodo={(text)=>{this.addTodo(text)}}/>  // 渲染组件（注释会报错，请删除注释）
                <TodoListComponent todoList={this.props.todoList} toggleTodo={(index)=>{this.toggleTodo(index)}} />
            </View>
        );
    }
}

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

export default connect(mapStateToProps)(HomeContainer);

3、定义 action

容器组件HomeContainer中 dispatch 了新的 action，我们需要进行定义。

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

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

/**
 * 更改 TODO 状态
 * @type {String}
 */
export const TOGGLE_TODO_STATUS = 'TOGGLE_TODO_STATUS';

export const ADD_NEW_TODO = 'ADD_NEW_TODO';               // 定义 action 类型

/*********************************** action 创建函数 *************************************/

/**
 * 更改 TODO 状态
 * @param  {Number} index TODO索引
 * @return {Object}       action
 */
export function changeTodoStatus(index){
    return {type: TOGGLE_TODO_STATUS, index};
}

export function addNewTodo(text){                        // 定义 action 创建函数
    return {type: ADD_NEW_TODO, text};
}

4、修改 reducer, 响应 action

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

import { combineReducers } from 'redux';

import { TOGGLE_TODO_STATUS, ADD_NEW_TODO } from '../actions/index';  


function todoList(state=[], action){
    switch(action.type){                                  
        case TOGGLE_TODO_STATUS:
            var todo = state[action.index];
            return [
                ...state.slice(0, action.index),
                Object.assign({}, todo, {
                  status: !todo.status
                }),
                ...state.slice(action.index + 1)
            ];
        case ADD_NEW_TODO:                                // 定义了新的匹配类型，以响应新的 action
            return [
                ...state,
                {
                    title: action.text,
                    status: false,
                }
            ];
        default :                                         
            return state;
    }

}

const reducers = combineReducers({
    todos: todoList
});

export default reducers;

运行项目，看看是否显示了输入框与按钮。输入文字，点击按钮，看看是否添加了新的 TODO 项。
恭喜你，redux 使用已经相当熟练了。

Paste_Image.png

下篇中，我们将对 TODO 进行过滤（添加新的 state，使用 Redux 进行管理）。

barnett_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一步一步学习 ReactNative + Redux（2）

写在开始上篇中，我们搭建了 ReactNative ＋ Redux 的结构、显示了初始数据。http://www.jianshu.com/p/adf8886f5408这篇，我们需要做状态更改了，即 dispatch(action) 。源码：https://github.com/eylu/web-lib/tree/master/ReactReduxDemo/app_step2
复制链接

扫一扫

专栏目录