React - Redux使用 - 学习/实践 - 2020-12-30

本文档详述了如何使用Redux和React-Redux进行前端项目开发,包括核心概念、文档阅读、实践代码展示、中间件使用、异步操作示例以及Redux调试工具的配置。提供多个学习资源链接,如Redux中文文档、视频教程,并展示了redux-logger和redux-thunk的使用效果。同时,介绍了Chrome浏览器的Redux调试工具redux-devtools-extension的安装和使用。
摘要由CSDN通过智能技术生成

1.应用场景

主要用于学习使用redux, 以及react-redux进行前端项目开发.

2.学习/操作

1.文档阅读

https://www.redux.org.cn/   // Redux 中文文档

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html   // Redux 入门教程(一):基本用法

https://redux.js.org   // Redux 官方

https://redux.js.org/introduction/getting-started  // Redux 官方文档

https://www.redux.org.cn/docs/react-redux/  // React Redux

 

Note:

文档是一定要读,而且要多读。个人推荐:略读,精读,再略读~~ // 三读学习法

 

视频教程:

https://www.bilibili.com/video/BV1fV411d7Ka?p=42   // 2020-web前端-React+ant+ts+node入门到实战的开发(react+ant design+typescript+node) -- 推荐

https://search.bilibili.com/all?keyword=redux&from_source=nav_search_new   // 直接搜索 Redux,从中你选取个人认为比较的教程即可

 

2.整理输出

1.基本用法

实践代码:https://github.com/ningxiaofa/react-redux-learning

 

过程中截图:

中间件使用

安装使用redux-logger, 效果如下

 

 

结合redux-thunk使用, 效果如下:

异步操作之定时器

 

异步操作之网络请求:

 

 

redux 调试工具:

https://github.com/zalmoxisus/redux-devtools-extension

  • rom Chrome Web Store // 要求能访问Google
  • or download extension.zip from last releases, unzip, open chrome://extensions url and turn on developer mode from top left and then click; on Load Unpacked and select the extracted folder for use

 

效果如下:

 

截止到目前, 一切尚属正常~~~~

 

 

后续补充

...

3.问题/补充

TBD

4.参考

 

1.文档阅读

https://www.redux.org.cn/   // Redux 中文文档

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html   // Redux 入门教程(一):基本用法

https://redux.js.org   // Redux 官方

https://redux.js.org/introduction/getting-started  // Redux 官方文档

https://www.redux.org.cn/docs/react-redux/  // React Redux

 

视频教程:

https://www.bilibili.com/video/BV1fV411d7Ka?p=42   // 2020-web前端-React+ant+ts+node入门到实战的开发(react+ant design+typescript+node) -- 推荐

https://search.bilibili.com/all?keyword=redux&from_source=nav_search_new   // 直接搜索 Redux,从中你选取个人认为比较的教程即可

后续补充

...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值