写在开始
有个bug需要修复
源码：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 已经修复！！！
