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