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/…