EOS [从零开始 DAPP 开发] 13 - 使用 Redux 保存数据

pendingauth · 2019年07月12日 · 10 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1747818948

在使用scatter-js开发EOS相关功能之前,先介绍一下React相关的知识,包括redux、redux-thunk、react-redux等,这篇文章介绍Redux。

什么是Redux?

Redux是一个React数据状态容器,作用主要是保存数据,比如使用EOS账户登录DAPP后,这个登录状态就需要保存起来;

React本身也提供了数据状态保存机制(state),但要在多个组件(页面由一个或多个组件构成)之间共享state数据就比较麻烦,只能在父子组件之间传递,如果组件结构比较复杂,数据传递效率很低;

Redux使用单一数据源(所有组件的共享数据保存在一个store中),解决了组件数据共享的问题。

Redux的工作流程

Redux的工作流程如图所示:

React组件获取数据会经过如下流程:

1、当React组件(React Component)需要获取数据时,它会把这个请求告诉Action Creator;

2、Action Creator创建一个action,并把请求封装在action中,然后调用dispatch(action)函数把请求发送给Store;

3、Store接收到请求后,并不知道数据存在哪里,它需要到Reducer中查询;

4、Reducer查到应该返回给React组件什么样的数据,告诉Store;

5、Store返回正确的数据给React组件。

React组件改变Store中的数据,流程也是类似的,发送不同类型的action即可。

安装Redux

微文DAPP直接使用Redux保存数据,先不介绍原生的数据保存方式了(适用于数据仅被单个组件使用的情况),安装Redux的命令如下:

npm install redux --save


使用Redux

到项目的src目录下创建一个store文件夹,store下新建两个js文件:index.js、reducer.js

reducer.js的代码如下:

定义了一个defaultState对象,用来存储DAPP的数据(account字段用来存储登录后的EOS账户),然后导出一个函数,这个函数有两个参数:state表示从组件接收到的数据,action表示请求类型,后面会用到;

index.js的代码如下:

调用createStore函数创建一个store,参数为reducer.js导出的函数,然后导出这个store供其他文件使用。


读取store中的数据

编写App.js的代码,import store,使用store.getState()就可以获取到store中的数据:

这里暂时把defaultState中account字段的值修改为"songguo55555",使用npm start命令启动项目,可以看到从store中读取的数据:

到这里,简单介绍了如何使用Redux和读取store中的数据,下篇文章介绍写入数据到store和其他更多Redux相关的内容。

Tips

基于React的前端开发普遍使用ES6(ECMAScript 6,JavaScript的最新标准),但ES6的相关知识已经不在EOS DAPP开发系列的范围内了,需要读者自行学习,推荐一本学习ES6的书:

ES6标准入门(第3版)

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册