# day004

**Repository Path**: yang-wanting/day004

## Basic Information

- **Project Name**: day004
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### day04总结：

##### redux的基本使用：

**redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具，用来做组件通信。**

1，安装redux:

npm install redux   react-redux

2,redux文件目录结构的创建：

,1、创建store/index.js文件
store就是整个项目保存数据的地方，并且只能有一个。创建store就是把所有reducer给它。

2、创建store/reducer.js文件(仓库)：
reducer就是根据action来对state进行操作，redux中的state是不能直接修改的，只能通过action来修改，相当于我们在单例中定义setter方法。
通过reducer操作后返回一个新的state。

3、创建store/constants.js文件（常量）：

```
const ADD_NUMBER = "ADD_NUMBER";
const SUB_NUMBER = "SUB_NUMER";

export {
  ADD_NUMBER,
  SUB_NUMBER
}
```

4、创建store/actionCreators.js文件（事件）：
redux 将每一个更改动作描述为一个action，要更改state中的内容，你需要发送action。一个action是一个简单的对象，用来描述state发生了什么变更。

```
import {
  ADD_NUMBER,
  SUB_NUMBER
} from './constants.js'

const addAction = (count) => ({
  type: ADD_NUMBER,
  num: count
});

const subAction = (count) => ({
  type: SUB_NUMBER,
  num: count
})

export {
  addAction,
  subAction
}
```

###### 补充（reducer拆分，目的是降低复杂度，提升整个页面的优化速率）

随着项目的扩大，会出现很多页面，同时会产生很多页面的数据需要维护，如果所有的数据都放在store/reducer文件中进行管理，会比较乱，这时候就可以根据不同的页面拆分成不同的reducer文件。

```
function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num };
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num };
    case CHANGE_BANNER:
      return { ...state, banners: action.banners };
    case CHANGE_RECOMMEND:
      return { ...state, recommends: action.recommends };
    default:
      return state;
  }
```

分别对里面的组件进行拆分，接着就可以在store/reducer.js文件中，通过**combineReducers**函数对counterReducer 和homeReducer进行合并

```
import { combineReducers } from 'redux';

import { reducer as counterReducer } from './counter';
import { reducer as homeReducer } from './home';

const reducer = combineReducers({
  counterInfo: counterReducer,
  homeInfo: homeReducer
})

export default reducer;
```

经过以上拆分，结构如下：

```
./store
├── counter
│   ├── actioncreators.js   // 存放home相关的action；
│   ├── constants.js        // 存放home相关的常量；
│   ├── index.js            // 统一对外暴露的内容；
│   └── reducer.js          // 存放分离的reducer代码；；
├── home
│   ├── actioncreators.js
│   ├── constants.js
│   ├── index.js
│   └── reducer.js
├── index.js
├── reducer.js             // 合并不同组件的reducer文件
```