初始Redux（二）使用。

2017-04-23 本文已影响61人 Kris_lee

之前把Redux 的一些学习的文章放在了一上。

今天主要是写一个小项目。

项目演示

简单的任务管理

这是用Redux实现的简单的任务管理。参考了上篇文章里的项目，自己做了一个很烂的效果，不过可以跑通。

首先我们根据演示图来分析，一个任务，一共有三种状态。1、“任务”处于加载状态 2、“任务”处于被选择状态 3、“任务”处于添加状态。

那么Redux 的工作流程又是怎么样的呢，看下图

如果不理解上图的，可以去搜索一下，看漫画学Redux。

贴上代码（简书没有代码模式，所以，只能截图，需要代码的之后会贴出git地址：）

app的入口组件。

createStore用于创建一个可以存储state的数据库，

applyMiddleware是添加中间件，之后会在action里用到。

combineReducers用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。

这里有一个Provider是React-Redux 提供Provider组件，可以让容器组件拿到state。

现在让我们指向BaseApp里

BaseApp里传入bindActionCreators 和 connect ，分别是做什么的呢？

bindActionCreators 是让action自动dispatch。

connect是用于从 UI 组件生成容器组件。而之后主要做的是一些navigator的工作，场景渲染，默认路由等工作，具体的可以参考下代码，

之后我们进入reducers

reducer主要是数据的结构，通过什么样的action.type返回什么结构。reducer处理完成的数据会交给根Reducer，再由于根Reducer提交给state管理。之后会由视图管理，决定出做出什么样的改变。

这里。我们定义了数据内容，通常在项目里这是由于访问接口而得到的数据。也可以是在AnsyStore 数据管理中得到的数据。。。这里是假定我们取出了，数据，放置在Reducer，（数据结构）

之后我们定义默认的state。然后，根据当前的action的type判断应该如何操作

这里默认是加载数据。INITIAL_TODOS，是加载数据。

LOAD_TODOS是加载数据。定义了ListView。之后，cloneWithRows（数据源）返回默认的todos数组和数据源。

加载数据，在读取当前状态里，加载完成的数据，即...state.todos。之后用unshift的方法，这是js语法李，将参数插入数组的头部，，要添加到尾部用push的方法。unshift直接修改原有的数组。

判断当前数据是否被选择。var selected = action.selected。这是从List中读取的数据，判断这个数据是否被选择。我们读取了state中的数据。之后，找到被选择的数据是在当前数组的位置。这里的if else 是做出判断，看数据是否被选择。被选择了。那么数据中的Text还是原Text，如果没被选择。那么我们将其selected定义为true。让其为true。也就是改变数据的selected。之后返回dataSource。

之后我们再来看actions。action是对数据的操作，让其返回对应的action.type。

TodoActions文件中

constLOAD_TODOS='LOAD_TODOS';

constSELECT_TODO='SELECT_TODO';

constAPPEND_TODO='APPEND_TODO';定义了三个状态。也就是Reducer中的状态。