Redux的基本使用

Redux是基于Flux 一种架构思想构建出来的框架,通常我们会配合React  进行使用,做状态管理.

Flux的思想是:

1.用户访问View

2.View发出用户的Action

3.Dispatcher收到Action,要求Store进行相应的更新

4.Store更新后,会发出一个"change"事件

5.View收到"change"事件后,更新页面

 

 我们看一下如下官方的图:

接下来 我们结合代码 演示一下:

我们现在有一个需求  就是

当我们点击电影1的时候  进入detail页面   让下面的tabbar消失掉

返回  则出现

 

//使用redux的思路流程:
//当detail页面 被创建的时候 我们应该发起 store.dispatch通知
//在App中   用store.subsribe  进行控制tabbar的显示和隐藏
// store.dispatch通知 一发送  就会  到store中   交给store中的reducer  进行处理  处理完以后
//App中的store.subsribe  就会 触发

 详解:

安装redux

 创建一个redux的文件夹 并附带子文件夹和 如下的 子文件

 在tabbarCreator.js的文件中   我们需要定义两个函数 

将上面两个函数  引入Detail 文件 同时 引入store

当detail组件 被创建了  我们就dispatch 上面hide的函数

当detail组件 被销毁了  我们就dispatch 上面show的函数

然后

配置Store.js文件

 创建Store 对象 并 用reducer 来接管 状态的处理

将store导出去

 最后

我们在App这个组件中 进行订阅

导入store

配置 store.subscribe()订阅

当detail组件创建 dispatch  hide的函数时    store将拿到的hide返回值 交给reducer进行判断

判断完成后  交给App组件这个 store.subscribe()

store.subscribe()修改状态

 Tabbar根据App中的状态进行显示

这样就完成了上面我们想要的效果