EOS [从零开始 DAPP 开发] 14 - Redux 调试工具、中间件、第三方模块和使用示例

yangzheng · 2019年08月08日 · 17 次阅读

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

这篇文章介绍Redux相关的工具、中间件、第三方模块,它们可以让开发者更方便的使用redux,并优化代码结构。

Redux DevTools

Redux DevTools是一个Chrome浏览器插件,可以帮助我们进行Redux的调试。

安装地址(需翻墙)

安装到Chrome扩展程序后,按F12打开浏览器控制台,可以看到多了一个Redux标签:

但显示的是"No store found",需要按说明在项目代码中进行插件配置。

修改store/index.js的代码,给createStore函数添加一个插件参数:

现在在浏览器中就可以实时监测Redux中的数据状态了:

redux-thunk

redux-thunk是一个redux中间件,它让store.dispatch函数不仅能传递对象,还可以传递函数;

不使用redux-thunk时,组件要发送一个action给store,一般是这样写的:

const action = {
  type: 'change_some_value',
  value: e.target.value
};
store.dispatch(action);

构造一个action对象,再调用dispatch函数发送,使用redux-thunk后,dispatch函数的参数action可以是一个函数。

安装redux-thunk的命令如下:

npm install redux-thunk --save

redux-thunk的配置

安装好后,修改store/index.js的代码如下:

现在调用createStore函数创建store时,使用applyMiddleware函数应用了redux-thunk这个redux中间件;

所谓中间件,指的是action和store的“中间”,即对dispatch函数的封装和升级。

react-redux

react-redux是一个第三方模块,由redux官方出品,功能是让使用redux的流程更加简化。安装命令如下:

npm install react-redux --save

安装好后,检查package.json的dependencies,到目前为止,应该有9个第三方依赖了:

除了react、react-dom、react-scripts是React自带的模块,另外6个都是自行安装的。

react-redux的配置

修改src/index.js的代码如下所示:

先从react-redux中引入组件,然后在根组件外面包一层组件,并定义一个属性store,值也为store;

这样,组件和它的所有子组件都有能力获取store中的数据了;

react-redux提供了两个核心API,一个就是这里的Provider,还有一个是connect,用于在组件和store之间做连接,下面会介绍。

使用示例

下面的例子结合redux-thunk、react-redux介绍如何使用Redux,模拟EOS账户登录DAPP的功能。

目前的项目代码结构是这样的:

在store目录下,再新建两个文件:actionTypes.js、actionCreator.js,加上之前已经创建的reducer.js、index.js,总共有4个文件;

actionTypes.js用于定义Action类型(目前只有一个改变登录状态的Action类型):

actionCreator.js用于创建Action:

reducer.js用于保存数据和处理Action:

index.js用于创建store:

另外src/index.js也做了修改,用于配置react-redux,上面有写。

主要业务逻辑写在src/App.js中,代码如下:

关键在于react-redux的connect的使用,它是react-redux提供的两个核心API之一,还有一个是src/index.js中使用的Provider;

connect对组件进行了一层封装,用于连接React组件和store,它接收两个参数:mapStateToProps、mapDispatchToProps;

mapStateToProps把store的state映射到组件的属性上,这样调用this.props.account就相当于调用stor.getState().account,mapStateToProps一般可以简写成mapState;

mapDispatchToProps把store.dispatch函数的调用者映射到组件的属性上,这样调用组件的属性函数就可以发送Action给store,mapDispatchToProps一般可以简写成mapDispatch。

这个例子既读取了store中的数据(state),又通过dispatch(action)修改了store中的数据,运行效果如下:

这里为了演示效果,写死了EOS账户名,下一篇文章将使用scatter-js连接Scatter来获取EOS账户名。

Tips

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

更多内容

EOS开发系列目录

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