# react-redux-starter

**Repository Path**: yhon/react-redux-starter

## Basic Information

- **Project Name**: react-redux-starter
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-04
- **Last Updated**: 2021-10-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

本starter是在 [Create React App](https://github.com/facebook/create-react-app) 的基础上建立的，集成了 redux、react-route、antd、MockJs

## 相关命令介绍

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br />
You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `yarn build`

Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `yarn eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## 目录结构说明
```
└── src
    ├── action  定义api调用
    ├── assert  存放静态文件(css、image)等
    ├── constants 常量定义
    ├── middleware 中间件目录
    ├── pages 存放页面
    ├── reducers 定义api返回结果存放值
    ├── store 创建 redux store
    └── utils 存放工具方法等
```
# 下面是用法介绍
以 example.js 为例
## 定义调用后端api接口的action
编辑 src/action/example.js 
```
import { createTypes } from './utils'
import { PAYLOAD } from '../middleware/api';

//定义 action 类型，建议以文件名大写开头作为namespace
export const EXAMPLE_GET_INFO = createTypes('example_get_info')

//定义获取后端api数据的action
export function getExample() {
    return dispach => dispach(
        {
            [PAYLOAD]: {
                types: EXAMPLE_GET_INFO,  //与上面定义的type一一对应
                endpoint: `/api/example`, //后端api路径
                options: {
                    method: 'GET' //定义HTTP方法类型 GET、PATCH、POST、DELETE
                },
                params:{} //url参数
            }
        }
    )
}
```
上面的代码意思是获取后端 /api/example 接口的数据  
PAYLOAD 中的 options 定义具体可参照 fetch option 的设置 [fetch](https://github.github.io/fetch/#options)

## 定义获取后端api接口返回数据的reduce
编辑 src/reducers/example.js 
```
import { createReduce } from './utils'
import * as ExampleActions from '../action/example'

//根据 action 中定义的 type 创建 reduce
const exampleGetInfo = createReduce(ExampleActions.EXAMPLE_GET_INFO)

const ExampleReducer = {
    exampleGetInfo
}

export default ExampleReducer
```
在 src/reducers/index.js 中引入
```
import ExampleReducer from './example'

const rootReducers = combineReducers({
    ...ExampleReducer //引入后写在这里
});
```

## 在组件中应用
编辑 src/pages/App.js
```
import React from 'react';
import logo from '../assert/image/logo.svg';
import '../assert/css/App.css';
import { Button } from 'antd'
import { connect } from 'react-redux'
import { getExample } from '../action/example' //引入我们定义的获取后端api数据的方法

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      exampleInfo: {
        message: "for you",
      }
    }
  }
  // react 新的生命周期函数，因为 componentWillReceiveProps 将要在 1.17.X 废弃
  static getDerivedStateFromProps(nextProps, prevState) {
    // 判断 api 是否调用成功
    if (nextProps.exampleGetInfo.status.success) {
      nextProps.exampleGetInfo.status.success = false
      //将后端接口返回的值设置到组件state中
      return {
        exampleInfo: nextProps.exampleGetInfo.res
      }
    }
    return null
  }

  render() {

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Happr start with <code>React</code> {this.state.exampleInfo.message}.
        </p>
          <p>{this.props.value}</p>
          {/**
           通过 this.props.getExample() 发起对后端api的调用
          **/}
          <Button type="primary" onClick={() => { this.props.getExample() }}>Get Example Info</Button>
        </header>
      </div>
    )
  }
}

// 通过 connect 将 api 返回的数据和组件的 props 映射起来
export default connect(state => ({
  //将 getExample 获取的后端数据映射到组件的props上，然后在组件中通过 this.props.exampleGetInfo 调用
  exampleGetInfo: state.exampleGetInfo 
}), {
  // 将调用后端api的action映射到组件的 props上，通过this.props.getExample()发起api的调用
  getExample 
})(App)

```
## 关于后端数据mock以及开发过程中设置proxy
前后端分离开发，在后端接口没开发好的时候需要我们 mock 数据  
编辑 src/setupProxy.js
```
const { createProxyMiddleware } = require('http-proxy-middleware');
import Mock from 'mockjs'

module.exports = function (app) {
    //在此 mock 对应接口返回的数据，例：/api/example get
    app.get("/api/example", function (req, res) {
        let data = {
            message:"for example"
        }
        return res.json(data)
    })
    //在此自定义proxy规则
    app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000/' }));
};
```
## enjoy it