# react-code-guide

**Repository Path**: darcrandex/react-code-guide

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 代码风格

> 建议使用[Typora](https://www.typora.io/#)阅读

1. 目录结构
2. 组件定义
3. 样式定义
4. redux-store
5. api 接口

## 目录结构

`/src`目录

```
|-- pages //业务页面组件
|   |-- Home
|       |-- index.jsx
|       |-- styles.css
|-- components //公共UI组件
|   |-- MyComponent
|       |-- index.jsx
|       |-- styles.css
|   |-- index.js
|-- common //业务公共组件(可选)
|-- router
|-- redux
|-- post-store //单个store模块
|   |-- action.js
|   |-- reducer.js
|   |-- saga.js
|-- rootReducer.js
|-- rootSaga.js
|-- utils
|-- apis
|-- App.jsx
|-- index.js
```

## 组件定义

### 业务组件

组件类需声明`props`, 使用[jsdoc](http://www.dba.cn/book/jsdoc/JSDOCKuaiBiaoQianBLOCKTAGS/PARAM.html)注解方式.
`props`中包含组件注入和 redux 注入,其中,组件注入(attr)必须在组件的`defaultProps`中设置默认值.

### 公共 UI 组件

集中在`components`中管理,并在`components/idnex.js`中统一注册导出.

```js
export { default as MyComponent } from "./MyComponent"
```

使用

```javascript
import { MyComponent } from "components"
```

## 样式定义

可使用`css`或`less`. 类名定义:`块_内容_状态`.

```css
.info_title_active {
  color: blue;
}
```

## redux-store

统一在`redux`文件夹中管理. 其中`rootReducer.js`和`rootSaga.js`用于收集各个子模块.

1. 子模块定义, 子模块使用单独文件夹管理,文件夹名称即模块名. 其中包含`actions.js`,`reducers.js`,`saga.js`三个文件.

2. `actions.js`中的函数名可以与`saga.js`中的处理函数名称相同.

3. `action`中的`type`属性定义: `模块名/事件名`.

所有的模块都可以添加一个公共更新的`action`和`reducer`

```javascript
// actions.js
updateState = (state = {}) => ({ type: "post-store/update-state", state })

// reducers.js
"post-store/update-state": (state, action) => ({ ...state, ...action.state })
```

## api 接口

由于 api 可能会被使用多次, 并且 api 的 url 属性可能会根据后台定义而改变, 为了方便管理,将所有 api 集中在`src/apis`管理.

1. api 的各个接口函数, 与业务无关. 在各个模块的`saga`中, 获取数据,再进行相应处理.

2. api 函数以`api`为前缀.