基于react-app搭建react react-router redux项目

鉴于很多人都是用第三方现成手脚架，所以这篇文章简略的说下怎么搭建一个react+react-router+redux的基础手脚架

第一步 初始化：

安装create-react-app并创建react项目：
Npm install create-react-app
Create-react-app XXX
Cd XXX

配置入口为根目录index.js 其他目录结构可自行修改

对于自定义配置方法

1、如果需要暴露配置文件可以使用 npm run eject
2、如果不想显示又想修改配置文件，可以使用插件react-app-rewired（需要注意和前面方法冲突，不能共用）
用法：添加config-override.js到根目录

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

---

第二步 搭建react-router：

Yarn add react-router-dom

一、新建文件router.Js
由于react-router v4版本是从原来的1个包分开为3个包（react-router-dom(for web)、react-router-native(for #native)、react-router(core)），这里我们需要引入的是react-router-dom

import React, { Component }  from 'react';
import {Router , BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';//Router在跳转时用到
import xxx from './xxx';//添加你需要跳转的组件

class RouterDom extends Component {
     render() {
     return (
          
               

                  
                      
                           
                           //默认跳转
                      
                  
               
          
         );
     }
 }

---

二、从index.js中引入router

import React from 'react';
import ReactDOM from 'react-dom';
import RouterDom from './router/router';

function IndexDom(){
    return (
        

            <--添加你需要的模块-->
            
        
    )
}
ReactDOM.render((
    
), document.getElementById('root'));

---

三、跳转方式

1、使用withRouter

import {withRouter} from 'react-router-dom';

export default withRouter(//你的模块)

模块中使用this.props.history.push('')进行跳转

2、用history/createBrowserHistory配置history方法

Ⅰ、新建history文件

import createHistory from 'history/createBrowserHistory';

export default createHistory();

Ⅱ、在路由文件中

加入history方法：

import history from './history';

找到标签，改为;

Ⅲ、文件模块中使用

import history from '../XXX/history';

history.push('/xxx')

另：路由监听方式，由于rect-router遵从history的api，所以可以使用history来监听:
history.listen(fuc)
更多：https://www.npmjs.com/package/history

---

第三步 搭建redux

首先安装redux和react-redux
yarn add redux react-redux --save-dev

接下来了解下redux的几个基本概念

Ⅰ、
state
当前数据的快照
初始化在reducer中插入

Const InitialState = [{
    Text:1
}]

Ⅱ、
reducer
改变state值，

export default function todos(state = initialState, action) {
    switch (action.type){
        case xx:
            return [
                    state.map(todo =>{
                    …todo,
                    A:’add’
            })
            ]
            //默认返回initialState数据
            Default:
                Return state
    }
}

Ⅲ、
action
触发相对应的reducer，

Export function addToDo(text){
//触发名为add_todo的reducer，传入text作为参数（reduce获取为action.text）
    Return {type:’add_todo’,text}
}

Ⅳ、
store
(
getState=>获取当前state，
subscribe=>注册监听器，例如在更新state前做一些行为
dispatch=>触发action
)

大概流程就是：store.dispatch=>action=>reducer=>state

---

第四步：引入react-redux

react-redux的主要作用就是将组件和store链接起来，

1、方法：connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps(state, [ownProps]): stateProps 把state绑定到组件props上

mapDispatchToProps(dispatch, [ownProps]): dispatchProps 把action绑定到组件props上

mergeProps(stateProps, dispatchProps, ownProps): props 传入前两个方法返回结果，函数返回对象将作为props的值

[options] (Object) 如果指定这个参数，可以定制 connector 的行为。

2、provider标签
主要用于连接组件和react-redux

整套流程走下来基本就可以开始撸自己代码了，如果觉得redux比较繁琐的话可以选择使用mobx。
mobx用法任意门：https://www.jianshu.com/p/7b4b16a95359