React开发实践(5)redux进阶

简介: React开发实践(5)redux进阶

1、UI 组件 和 容器组件拆分

  • UI 组件 --> 只展示 不负责逻辑部分
  • 容器组件 --> 只负责逻辑 不负责展示
  • 此处我们将 TodoList 的 UI部分拆出来, 写一个 TodoListUI 组件
  • 基本思想就是 父组件 传递 函数和变量

网络异常,图片无法展示
|

子组件使用 this.props.xxxx 接收并使用

网络异常,图片无法展示
|

  • 注意有参数传递的写法 改成 函数形式

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 还有一个需要注意的事情  子组件不要写 () 执行函数

网络异常,图片无法展示
|

2、无状态组件 / function 组件

  • 当一个页面只有 render部分时, 应该更改为函数组件,因为class组件会附带很多的生命周期等其他东西需要执行,而函数组件只需执行函数

网络异常,图片无法展示
|

3、Redux 发送异步请求 获取数据

  • 其实常规 组件获取数据在 didMount 中, redux 常规使用 toolkit 在thunk 中获取数据
1、charles 模拟数据
2、didMount 中 axios 发请求
3、actionCreators  新增 action
4、store.dispatch(xxx新的action)
5、新加 Reducers 将数据 更新后 返回新的 newState
6、页面数据更新成功
复制代码
  • 我这个 charles 不给力  下次换个工具模拟一下

先把主要部分写出来

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • nice !

4、使用 redux-thunk 中间件 进行 ajax 请求  

1、安装 yarn add redux-thunk
    2、配置一下 store 可以在 github 搜 redux-thunk 和 redux-devtools-extension
    3、改一下 store 
    4、检查一下 redux 插件是否好用 
复制代码
import thunk from "redux-thunk";
import reducer from "./reducer";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk));
const store = createStore(reducer, enhancer);
export default store;
复制代码
  • 非常nice
  • redux-thunk 存在使得 action 不用写 对象 可以写成 函数形式
1、将 didMount 中的请求 拿到 action Creator 创建 一个函数
  2、使用 store.dispatch(action) 发给 store 并且 里面的 action 函数自动执行
  3、非常nice 我们来尝试一下 
  4、拿到 const data = res.data;
  5、action creator 创建 action  const action = initList(data);
  6、dispatch(action);
复制代码

* 非常需要注意的一点  在 action creator 中写 getList ,写成函数时 可以传递 dispatch 参数,并且 可以调用 dispatch(action) 发给store

  • 组件内 这样使用

网络异常,图片无法展示
|

  • action creator

网络异常,图片无法展示
|

* 需要注意 另外一件事情其实 store 只能接受 action 对象, 但是当前是 函数 怎么为啥可以

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 此处 再看一遍 复习一下

5、到底什么是 Redux 中间件 ?

  • 一定是 redux 的中间件 !

网络异常,图片无法展示
|

6、Redux-saga 中间件 使用方法

  • 先说一点 额外的部分,如果 charles 代理后 请求还是 404 可以完全退出浏览器和 charles 再试试
1、先将使用 thunk 的部分还原  
     安装 saga yarn add redux-saga
 2、更改 store 使用 saga 的配置
 3、新建一个文件 写 sagas.js
 4、写方法  当出发 action 时 调用对应的函数 
 5、然后这个 action 会推到 store 
 6、reducer 会处理 返回新的 state 
复制代码
  • 整体流程 此处敲击一下 首先redux 中间件指的是 action 和 store 之间的部分, redux-thunk 使得 action 可以写函数形式,可以在函数内 处理异步请求,然后再交给 store , redux-saga 使得 异步处理 可以在 sagas.js 中处理,只需要在 didMount 中触发 就可,sagas 会执行对应的函数 执行 请求,并且这个请求,并且将数据 给到 对应的 reducer ,然后更新 数据 得到新的 newState 交给 store 更新数据,非常 nice !

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

7、react-redux 用法

1、首先第一件事情 将写的组件和 store 都清除掉 重新 写一遍 复习
    2、安装 yarn add react-redux
    3、然后 在 index.js 入口文件处 使用 Provider  被它包裹的组件都可获取 store 中的数据,不需要手动 再写 this.state = store.getState()
    4、在 组件内部 调用 connect(mapStateToProps,mapDispatchToProps)(组件名) 连接组件和 store
    5、
复制代码

* 先展示 一下 之前的写法 store index.js

网络异常,图片无法展示
|

  • reducer.js

网络异常,图片无法展示
|

* 组件内使用 this.state = store.getState()

网络异常,图片无法展示
|

  • 页面效果展示 非常的nice 和正常~

网络异常,图片无法展示
|

* 接下来 使用 react-redux

1、安装
2、入口文件使用 Provider 
3、组件内使用 connect 连接 组件和 store
复制代码
  • 入口文件 index.js

网络异常,图片无法展示
|

  • 组件 TodoList.js

网络异常,图片无法展示
|

  • 详细 使用 connect 连接  需要写 它的两个参数

* 这两个参数的意思 以及使用 非常 重要 mapStateToProps mapDispatchToProps

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 然后 reducer.js

网络异常,图片无法展示
|

  • 然后 在页面可以 输入内容啦

网络异常,图片无法展示
|

  • store index.js 稍加配置一下

网络异常,图片无法展示
|

  • 页面效果非常nice

网络异常,图片无法展示
|

8、使用 react-redux 完成 todoList 编码

  • 先完善 点击 按钮添加的功能

* TodoList.js

网络异常,图片无法展示
|

网络异常,图片无法展示
|

* Reducer.js

网络异常,图片无法展示
|

  • 删除 按钮
  • TodoList.js

网络异常,图片无法展示
|

网络异常,图片无法展示
|

* Reducer.js

网络异常,图片无法展示
|

  • 接下来 优化一下
  • 写出优化方向,这个组件 上面只有 render 部分, 所以我们改成 function 组件

* 另外一点 下面的 connect 相当于 state 和 dispatch 方法 将数据 放到了 页面内使用,使得整体变成了一个 附带逻辑的 容器组件 ,并且被导出 在别的地方使用

  • 改动 TodoList.js

网络异常,图片无法展示
|

* 为了 更加规范 再次优化一下   本次优化 主要是将页面内的 action 放到 actionCreator 里面,将页面常量 放在 actionTypes 中管理  

  • actionCreator.js

网络异常,图片无法展示
|

  • actionTypes.js

网络异常,图片无法展示
|

  • 然后 在 TodoList.js 直接引用 即可

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 页面 功能 良好 非常 nice !

撒花 🎉🎉🎉

更多项目请访问 github  github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…



相关文章
|
4月前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
191 1
|
3月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
169 4
React开发需要了解的10个库
|
3月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
311 2
|
3月前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
63 0
|
2月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
66 1
|
2月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
39 3
|
3月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
78 4
|
3月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
3月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用