本文共 6618 字，大约阅读时间需要 22 分钟。

写在开始

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

源码：

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 (            
                   
                        
                     
                
           );    }}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 (            
   
                {this.props.todoList.map((todo, index)=>{                var finishStyle = {textDecorationLine:'line-through', color:'gray'};                return (                    
    
     {this.toggleTodo(todo.id)}}>    // 修改点击事件，index => id （注释会报错，请删除注释）                        
     
      {todo.title}
                         
                    );            })}            
           );    }}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 (            
                   
    
     {
  this.addTodo(text)}} />                
     
      {
  this.toggleTodo(id)}} />  // index => id （注释会报错，请删除注释）                
      
       {
  this.filterTodo(filter)}} />            
      
     
    
           );    }}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 是我们想注入的 propsfunction 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 已经修复！！！

转载地址：http://lgeni.baihongyu.com/