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

心已赠人 2023-01-01 01:55 92阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于学习使用redux, 以及react-redux进行前端项目开发.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读 <a href="https://www.redux.org.cn/" rel="nofollow">https://www.redux.org.cn/</a>&nbsp; &nbsp;//&nbsp;Redux 中文文档 <a href="http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html" rel="nofollow">http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html</a>&nbsp; &nbsp;//&nbsp;Redux 入门教程（一）：基本用法 <a href="https://redux.js.org" rel="nofollow">https://redux.js.org</a>&nbsp; &nbsp;//&nbsp;Redux 官方 <a href="https://redux.js.org/introduction/getting-started" rel="nofollow">https://redux.js.org/introduction/getting-started</a>&nbsp; // Redux 官方文档 <a href="https://www.redux.org.cn/docs/react-redux/" rel="nofollow">https://www.redux.org.cn/docs/react-redux/</a>&nbsp; //&nbsp;React Redux &nbsp; Note： 文档是一定要读，而且要多读。个人推荐：略读，精读，再略读～～　// 三读学习法 &nbsp; 视频教程： <a href="https://www.bilibili.com/video/BV1fV411d7Ka?p=42" rel="nofollow">https://www.bilibili.com/video/BV1fV411d7Ka?p=42</a>&nbsp; &nbsp;//&nbsp;2020-web前端-React+ant+ts+node入门到实战的开发（react+ant design+typescript+node） -- 推荐 <a href="https://search.bilibili.com/all?keyword=redux&amp;from_source=nav_search_new" rel="nofollow">https://search.bilibili.com/all?keyword=redux&amp;from_source=nav_search_new</a>&nbsp; &nbsp;// 直接搜索 Redux，从中你选取个人认为比较的教程即可 &nbsp; 2.整理输出 
 <table> 
 <tbody> 
 <tr> 
 <td> １.基本用法 实践代码：<a href="https://github.com/ningxiaofa/react-redux-learning" rel="nofollow">https://github.com/ningxiaofa/react-redux-learning</a> &nbsp; 过程中截图: 中间件使用 安装使用redux-logger, 效果如下 <img alt="" height="863" src="https://img-blog.csdnimg.cn/20201230161623521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; &nbsp; 结合redux-thunk使用, 效果如下: 异步操作之定时器 <img alt="" height="1081" src="https://img-blog.csdnimg.cn/20201231000309785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 异步操作之网络请求: <img alt="" height="996" src="https://img-blog.csdnimg.cn/20201231123922261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; &nbsp; redux 调试工具： <a href="https://github.com/zalmoxisus/redux-devtools-extension" rel="nofollow">https://github.com/zalmoxisus/redux-devtools-extension</a> 
 <blockquote> 
 <ul> 
 <li>rom&nbsp;<a href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd" rel="nofollow">Chrome Web Store</a>;&nbsp; // 要求能访问Google</li> 
 <li>or download&nbsp;<code>extension.zip</code>&nbsp;from&nbsp;<a href="https://github.com/zalmoxisus/redux-devtools-extension/releases" rel="nofollow">last releases</a>, unzip, open&nbsp;<code>chrome://extensions</code>&nbsp;url and turn on developer mode from top left and then click; on&nbsp;<code>Load Unpacked</code>&nbsp;and select the extracted folder for use</li> 
 </ul> 
 </blockquote> <img alt="" height="647" src="https://img-blog.csdnimg.cn/20201231135646244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="798"> &nbsp; 效果如下： <img alt="" height="699" src="https://img-blog.csdnimg.cn/20201231141625299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 截止到目前， 一切尚属正常~~~~ </td> 
 </tr> 
 </tbody> 
 </table>&nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; 1.文档阅读 <a href="https://www.redux.org.cn/" rel="nofollow">https://www.redux.org.cn/</a>&nbsp; &nbsp;//&nbsp;Redux 中文文档 <a href="http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html" rel="nofollow">http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html</a>&nbsp; &nbsp;//&nbsp;Redux 入门教程（一）：基本用法 <a href="https://redux.js.org" rel="nofollow">https://redux.js.org</a>&nbsp; &nbsp;//&nbsp;Redux 官方 <a href="https://redux.js.org/introduction/getting-started" rel="nofollow">https://redux.js.org/introduction/getting-started</a>&nbsp; // Redux 官方文档 <a href="https://www.redux.org.cn/docs/react-redux/" rel="nofollow">https://www.redux.org.cn/docs/react-redux/</a>&nbsp; //&nbsp;React Redux &nbsp; 视频教程： <a href="https://www.bilibili.com/video/BV1fV411d7Ka?p=42" rel="nofollow">https://www.bilibili.com/video/BV1fV411d7Ka?p=42</a>&nbsp; &nbsp;//&nbsp;2020-web前端-React+ant+ts+node入门到实战的开发（react+ant design+typescript+node） -- 推荐 <a href="https://search.bilibili.com/all?keyword=redux&amp;from_source=nav_search_new" rel="nofollow">https://search.bilibili.com/all?keyword=redux&amp;from_source=nav_search_new</a>&nbsp; &nbsp;// 直接搜索 Redux，从中你选取个人认为比较的教程即可 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg_size_16_color_FFFFFF_t_70]: /images/20221120/5776456ea9b840ffbe7da5fbabc27f29.png