一步一步学习 ReactNative + Redux（3.1:bug修复）

写在开始

有个bug需要修复http://www.jianshu.com/p/96ecff28b87d

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

Bug 出现

我们的 TODO 示例虽然告一小段落，但经过使用，发现，当在 Undo 和 Finish 过滤条件时，点击非最后一个 TODO 时，出现不正确的结果。
这是因为我们使用 TODO 索引index做为切换 TODO 状态status依据而造成的问题。
原因在于 store 树结构中的 TODO 列表数据是全数据，经过过滤后，页面展示中的数据非全数据，索引(index)值不正确所引起的。

Paste_Image.png

如图中所示，经过过滤后，“打篮球”这个 TODO 的索引为 0 ，当使用索引 0 来修改 store 的索引相同的数据“吃早饭”时，它是错误的（红色箭头所示）。
正确的数据应该对应 store 数据中的索引为 1 的数据“打篮球”（绿色箭头所示）。

我们需要修复这个bug。

Bug 修复

索引值(index)已经不能使用了，我们需要找到其他的方式来确认 TODO 的一致性。
TODO 的title属性？可以，但是不建议使用。因为它是展示的一部分，我们不想这样做。

我们为 TODO 添加一个新的属性id来专门确认 TODO 的一致性（唯一性）。

1、修改初始数据

既然我们所有的 TODO 数据都要以 id 来确认，那么，初始数据里也要添加id属性。

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

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
} from 'react-native';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import reducers from './reducers/index';

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

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

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、修改子组件 TodoListComponent
修改展示组件的，点击 TODO 时，不在传递 index ，需要改为传递 id。

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

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

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

    toggleTodo(id){      // 修改执行方法，index => id ，本来可以不用修改参数，但为了统一起见，我们还是修改。
        this.props.toggleTodo && this.props.toggleTodo(id);    // index => id
    }

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


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

3、修改容器组件 HomeContainer
为了统一，我们把容器组件 HomeContainer 一同修改为id。
ReactReduxDemo/app/containers/home.container.js 文件，修改如下：

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

import { changeTodoStatus, addNewTodo, filterTodoList } from '../actions/index';

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);
    }

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

    toggleTodo(id){                             // index => id
        let { dispatch } = this.props;
        dispatch(changeTodoStatus(id));         // index => 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)}} />  // index => id （注释会报错，请删除注释）
                <TodoFilterComponent filter={this.props.currentFilter} filterTodo={(filter)=>{this.filterTodo(filter)}} />
            </View>
        );
    }
}

const getFilterTodos = (todos, filter) => {
  switch (filter) {
    case 'All':
      return todos;
    case 'Undo':
      return todos.filter( todo => !todo.status);
    case '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、修改 Action

dispatch(action ) 中的参数修改了，我们把 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';

export const SET_FILTER = 'SET_FILTER';

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

/** * 更改 TODO 状态 * @param {Number} id TODO索引 // 注释修改 * @return {Object} action */
export function changeTodoStatus(id){     // 参数名称修改 index => id
    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 修改
最后，将 store 状态管理的 reducer 进行修改，以对正确的 TODO 项进行管理（对正确的 state 数据进行管理）。

import { combineReducers } from 'redux';

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


function todoList(state=[], action){
    switch(action.type){
        case TOGGLE_TODO_STATUS:                // 修改状态切换 action 所对应的处理 reducer，根据id找到正确的索引 index 和 todo
            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:                      // 修改添加 TODO 的 renducer，增加 id 字段
            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;

好了，修改完毕。
运行项目，切换到 Undo 或 Finish 条件时，点击 TODO ，看看是否正确了呢？
恭喜你，bug 已经修复！！！

秒客网

一步一步学习 ReactNative + Redux（3.1:bug修复）

写在开始

Bug 出现

Bug 修复

相关文章