这是一个来自Redux网站上的一个demo,我们可以来学习下如何简单的使用react-redux,先来看效果图:

React-Redux案例TodoList分析 gif React-Redux案例TodoList分析

demo的内容很简单,就是在输入框中输入将要todo的内容,然后就会出现一个todo列表,在todo内容项上单击,就表示完成,然后变成被划掉的样子,最下面的按钮可以快速查看已经完成,没有完全和全部的列表。

安装项目&依赖

1.create-react-app demo,新建一个react项目。

2.npm install redux --S,安装redux。

3.npm install react-redux --S,安装react-redux。

注意redux和react-redux是两个不同的东西,redux是一个框架,它可以和很多其他的框架一起搭配使用,react-redux是一个让redux和react一起使用起来更方便的一个插件。

结构分析

首先我们看一下这个demo的目录结构:

这个demo是我在官网的demo上修改版的,官网上的demo其实做的比我这个更好,因为它分离的更彻底,但是我把它修改的更好理解,更容易知道它的一般开发套路。

state,reducer,action

现在我们要分析下如何用react-redux去实现这个功能,首先看看思路分解图:

首先我们要确定的是里面有哪些state,state就是所有的数据体,这里有两个,一个是todos列表,是一个数组,还有一个就是filter,表示当前筛选条件。

然后就是确定reducer和action,reducer是叠加状态的方法,其实可以理解为交互,因为交互可以更改数据体。这里简单点说就是发生点击事件的地方,一共有3处,点击AddTodo增加todo列表(add_todo);点击todo列表内容改变它的状态(toggle_todo);点击筛选显示不同的todo列表(set_filter)。

action就是reducer中出现那些名词,把它们统一起来,有add_todo,toggle_todo,set_filter以及所有filter的状态。action和reducerd的代码如下:

注意reducer可以分解成多个,最后用combineReducers把它们粘在一起;每个reducer中都有一个initialState,和Array.prototype.reduce方法类似,有一个初始的值。

我理解的reducer和action,state的关系大致如下:

background Layer 1 state reducer initState action

容器组件和展示组件拆分

这个在之前的文章中有所讲解: React中的容器组件和展示组件。我们看上面的结构图会发现components和container目录下包含的文件,名称都是一样的,这正是因为拆分的结果,其中所有的展示组件在components中,所有的容器组件在reducers中。

组件部分主要分成三部分:

components目录下代码如下:

container目下代码如下:

容器组件通过react-redux提供的connect方法(返回一个新的组件),将数据放在显示组件的prop上,然后显示组件去拿prop上的数据。

store,Provider连接UI和数据

最后需要将组件和reducer连接起来:

数据的传递是通过react-redux提供的Provider以及放在上面的store,注意这个要放在最上层,然后里面的组件可以通过store拿到数据。

我们可以注意到,在顶层我们不会直接使用展示组件,而是引用容器组件,整个项目的引用关系大致如下:

background Layer 1 state reducer initState action store 容器组件 展示组件

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字