# react-redux-courses-tablist-demo

**Repository Path**: kevinleeeee/react-redux-courses-tablist-demo

## Basic Information

- **Project Name**: react-redux-courses-tablist-demo
- **Description**: 案例：课堂分类`tab`栏切换显示课堂列表

实现点击`tab`栏课堂分类显示不同的课堂列表

**技术：**

- `redux`
- `axios`
- `express`后端接口
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-20
- **Last Updated**: 2022-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 深入`redux`

***问题：如何实现派发器？***

假如在`vue2.x`写法的场景下，实现把`method`里的代码编写区域抽离外部文件编写

派发器根据一个又一个的事情来指定一个`type`，`type`的作用是遇到`type`对应的事情就触发一个方法的执行，每件事所对应的方法集合是根据每件事情的`type`去触发的

派发器(`dispatcher`)根据`action`里面的`type`去调用相应的`method`方法

- **执行顺序：**
- `type1 -> method1`
- `type2 -> method2`

[参考案例]:https://gitee.com/kevinleeeee/dispatcher-todolist-vue2.x-demo3



***问题：`redux`和派发器有什么关系？***

基本原理一致，但有一点不同，不同页面的组件想拿到数据状态是不同的，`redux`可以解决



> **注意：**
>
> 尽可能避免使用`redux`和`vuex`，增加程序的复杂性，和维护，适用中大型应用项目



***问题：有什么情况必须要用到`redux`?***

1. 页面是`alive`的
2. 在`react native`开发中某些页面



**安装**

1. `redux@4.0.5`库
2. `react-redux@7.2.0`：专门为`react`设计高阶组件，提供了`connect`方法，将组件和`redux`结合在一起
3. `redux-thunk@2.3.0`：异步`action`需要使用的



**使用**

```
//1.引入Provider
import { Provider } from 'react-redux';

//2.包裹组件
//该组件提供的属性，底下的子组件都能接收
//store属性接收的store是自定义的store文件
<Provide store={store}>
  <App></App>
</Provide>

//3.定义actions/reducers/states文件

//4.组合所有reducers

//5.引入connect 将redux跟组件相关联
import { connect } from 'react-redux';

//6.引入actions里定义的方法，传入到connect
import { changeCourseField } from '../store/actions/courseTabList';

//7.使用connect
export default connect(
  //提供中央state
  function mapStateToProps(state) {
    return {
      curField: state.courseTabList.curField
    }
  },
  //提供中央state方法
  function mapDispatchToProps(dispatch) {
    return {
      changeCourseField: (field) => dispatch(changeCourseField(field))
    }
  }
)(IndexPage);
```



***问题：为什么存在`connect`方法？***

它的调用传入组件的写法实现将中央的`state`作为属性传入组件中，实现个个组件的`state`保持隔离



**关于`store`文件目录：**

```
//store目录
─index.js - store入口文件/创建仓库/汇总reducers/将所有reducers,组合state,中间件传入仓库
─states - 导出state对象
─reducers - 专门来操作state数据的函数
─actions - 保持改变state数据的方法和类型
```



**案例：课堂分类`tab`栏切换显示课堂列表**

实现点击`tab`栏课堂分类显示不同的课堂列表

**技术：**

- `redux`
- `axios`
- `express`后端接口

**案例展示图：**

![image-20220220174127128](https://gitee.com/kevinleeeee/blog-hexo-image-bed/raw/master/img//image-20220220174127128.png)

**目录：**

```
├─src
|  ├─App.jsx - 应用组件/使用Provide组件包裹并传入store
|  ├─index.js - 入口文件/挂载DOM
|  ├─utils
|  |   └http.js - 封装axios
|  ├─store
|  |   ├─index.js - store入口文件/创建仓库/汇总reducers/将所有reducers,组合state,中间件传入仓库
|  |   ├─states - 导出state对象
|  |   |   └courseTabList.js
|  |   ├─reducers - 专门来操作state数据的函数
|  |   |    └courseTabList.js
|  |   ├─actions - 保持改变state数据的方法和类型
|  |   |    └courseTabList.js
|  ├─pages
|  |   └Index.jsx - 首页页面组件/connect绑定中央state和方法到props属性/将state数据传入子组件使用
|  ├─models
|  |   └index.js - 封装请求接口
|  ├─configs
|  |    └config.js - 配置请求路径
|  ├─components
|  |     ├─CourseList
|  |     |     ├─CourseItem.jsx
|  |     |     └index.jsx
|  |     ├─CourseField
|  |     |      ├─FieldItem.jsx
|  |     |      ├─index.css
|  |     |      └index.jsx
├─serve
|   ├─index.js
|   ├─package-lock.json
|   ├─package.json
|   ├─data
|   |  ├─courseField.json
|   |  └courseList.json
├─public
|   ├─favicon.ico
|   └index.html
```

**总结：**

学会`redux`数据状态管理是在项目中结合使用，把中央状态和状态的方法提供好，不能改变组件内部的`state`，只能把`redux`的状态的状态方法作为属性传递给组件

**源码地址：**https://gitee.com/kevinleeeee/react-redux-courses-tablist-demo