# reduxApp

**Repository Path**: chen_xumayun/reduxApp

## Basic Information

- **Project Name**: reduxApp
- **Description**: redux学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### redux

- 定义：状态集中管理器
- 三大组成部分：
  store[createStore]
  reducer[状态的目录]
  action[动作]
- 数据流：单向的。因为是单向的，所以才有订阅[subscribe]方法
- 分工：
  1. component[组件]；
     1.1 初始获取仓库值：store.getState()
     1.2 派发动作[修改仓库值]：store.dispatch(action)
     1.3 订阅者：const unSubscribe = store.subscribe(()=>{})；
     1.4 取消订阅:unSubscribe();
  2. store[仓库]：
     2.1 引入 reducer 使用 createStore(reducer)，得到我们的 redux 仓库
  3. reducer[状态目录]；
     3.1 定义：reducer 是一个纯函数，没有第三方依赖 没有异步方法和接口，没有额外的数据
     3.2 参数：state 只读状态，action 表示操作的动作
     3.2.1 state：因为它是只读的，所以需要克隆一个新的来进行修改，并且返回这个新的状态对象
     3.2.2 action 必须要有 type 属性，我们根据 type 属性来执行具体的操作
  4. actionTypes[action 对象中的 type 的集合]；
     4.1 他是给 actionCreators 用的以及 reducer 里使用；
     4.2 目的：集中管理，便于维护
  5. actionCreatores[action 集合]；
     5.1 它是给组件 compoment 用的，因为 dispatch 是在组件中发起的；
     5.2 目的：集中管理，便于维护；我们后期的 ajax 请求也在这里去写；

### 11-22 reducer 合并

1.  语法：combineReducers({reducerA,reducerB});
2.  combineReducers 返回一个函数，该函数就是一个总的 reducer
3.  使用：在组件中使用 getState()取值的时候，需要点 reducer 模块 名称：//store.getState().reducerA
4.  修改：dispatch 的时候，没有模块的区别，和正常使用一样。
5.  注意： 当一个组件发起 dispatch 那么所有的合并里的 reducer 都会被触发，所以我们必须在 actionType 里定义的时候尤其要区分模块命名规范；

### 11-25

- 安装：cnpm i -S react-redux
- Provider:它是托管 redux 仓库的根容器
  - 他有一个唯一的属性：store 接收 redux 生成的 store 对象；
- connect：连接器；将组件和 Provider 连接，从而获取 store 里的数据以及操作
  1.  mapStateToProps:将 store 里的 state 映射到该组件的属性里：用来获取仓库数据的；同时他也是订阅
  2.  mapDispatchToProps:将派发动作方法映射到该组件的属性里集中的管理了操作 store 仓库的方法集合
  3.  忽略传参：connect(null,dispatch);

### 11-26 bindActionCreators

- bindActionCreators:将 dispatch 和 action 合成一个生成一个动作函数，传递给不需要使用 redux 的组件
- 如何安装 redux 调试器：

1.  在浏览器中下载 redux devTool 扩展程序
    store 入口文件安装

```js
import { createStore, compose } from "redux";
import reducer from "./reducer";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers());

export default store;
```

### 11-28 中间件的使用

1.  中间件是什么？它是对 redux 功能的一种扩展；
    1.1 在 actionCreator 里使用异步请求时，需要使用的中间件叫：redux-thunk
2.  安装中间件：applyMiddleware()它是 redux 里专门用来安装各种中间件的工具；并且作为 creactStore 的第二个参数；
3.  如果需要安装多个中间件或者既有中间件又有调试工具的时候，需要使用 compose()将多个增强器【applyMiddleware】进行合并；同样作为 createStore 第二个参数使用
4.  关系： compose(applyMiddleware(redux-thunk),...applyMiddleware)
5.  actionCreator 里的具体使用：
    5.1 首先要有一个同步的 action 动作，它是用来给咱们异步的 action 动作使用的
    5.2 异步的 action 和同步的 action 唯一的区别就是他返回的不是对象，而是一个函数；
    5.3 在异步 action 中返回的函数上有两个参数：dispatch,getState:他们两个参数是 applyMiddleware 给注入的

```js
export const anyAction = () => {
  return (dispatch, getState) => {
    // ajax
  };
};
```