Abyss丶Kitty的博客

我是一只快乐的程序喵!

ReactNative之Redux入门(3)- redux入门

注:本教程针对于有过React/ReactNative开发经验的人群。

英文原版:http://redux.js.org/

参阅文档和阮一峰老师的网络日志进行学习。

可能在第一节的学习中对Redux的基本概念看完之后都不了解。现在呢再写完Demo后再看一遍,将会恍然大悟。

摘抄并简单介绍Redux的基本概念工作原理。

1.store
Store就是保存数据的地方,可以看做成一个容器。整个应用只有一个Store。Redux提供createStore用来创建Store。
2.state
Store保存的所有数据,每个都是state。Store对象包含所有的数据。如果想要得到摸个时点的数据,就要对store生成快照,就叫做state,当前时刻的state可以通过store.getState()拿到。
Redux规定,一个state对应一个View。state变view变,反之亦然。
3.Action
State的变化,会导致View的变化。但是,用户是拿不到state的,用户只能接触到View。所以state的变化一定是View导致的。
View如何导致state发生变化呢?
View通过Action发出通知,将数据送达Store,再由Store改变state,state改变必然会引起View的改变。
4.ActionCreator
View通过Action发送消息,每发送一个不同的Action,都要创建一个Action。所以要定义ActionCreator函数。并通过ActionType来判断。
5.store.dispatch()
dispatch是View发出Action的唯一方法。
dispacth接收一个Action参数,并将它发送出去。
6.reducer
Store接收到Action以后,会给出一个新的state,这样View才能发生变化,这种state的计算过程就叫做reducer。
当dispatch发送来action的时候,会自动触发reducer的执行,为什么会自动触发呢?因为在创建Store时传入了reducer。
reducer是纯函数,纯函数就是拿到同样的数据会返回同样的输出。

由于整个应用只有一个Store所以必然导致reducer跟着庞大,所以就要对reducer进行拆分。拆分方法见Demo。
7.store.subscribe
Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。
import { createStore } from 'redux';const store = createStore(reducer);store.subscribe(listener);
显然,只要把 View 的更新函数(对于 React 项目,就是组件的render方法或setState方法)放入listen,就会实现 View 的自动渲染。
store.subscribe方法返回一个函数,调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() => console.log(store.getState()));unsubscribe();

工作原理图解


阅读更多
版权声明:乐于分享,学海无涯。转载请标明出处。 https://blog.csdn.net/sinat_30949835/article/details/79962340
个人分类: ReactNative进阶
上一篇ReactNative之state基础用法+究极体验
下一篇ReactNative之Redux入门(4)- react-redux入门
想对作者说点什么? 我来说一句

angular-datepicker

2018年07月02日 51KB 下载

没有更多推荐了,返回首页

关闭
关闭