之前把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中的状态。
loadTodos 是我们加载数据,我们选择定时器,让其1s后加载出数据。这也是为什么需要定义thunk,让其发出一个LOAD_TODOS。
appendTodo。添加。定义text。向数据中添加文本。
是否被选择。return。一个SELECT_TODO,selected的是否被选择。
到了渲染页面部分了。
展现出如图所示的效果,首先我们需要将定义得到好的数据加载进来。即componentDidMount中加载数据。const {loadTodos} = this.props.actions. loadTodos();
添加方法。也是如此,在添加的Text中增加onPress方法,让其this.appendTodoList.bind(this)
是否被选择?
代码里的console 是方便我在控制台测试。
可以判断数据源是否被选择。如果被选择了就选择todoTextDone,否则就另一个。
之后加载数据的时候也可以使用三目表达式。
Redux的所有功能就此完成。很多地方需要自己推敲。
这里贴出github的地址:项目地址。安卓需要自己在index.android.js的入口文件中配置一下。
ios可直接运行。
文章是自己个人对于Redux的理解,有不对的地方,还请各位大神指点。