react + react-router4 + redux +webpack 框架搭建(使用CRA)

最近打算用react来开启一个新项目

项目目录如下：

（待更）

框架搭建步骤如下：

1、使用create-react-app生成项目；

 

2、npm run eject 暴露项目的配置，从而自由配置项目所需依赖；

 

3、添加less less-loader

(1)  npm install less less-loader --save-dev

(2)  修改 config\webpack.config.dev.js和config\webpack.config.prod.js

【1】config\webpack.config.dev.js

【2】config\webpack.config.prod.js

(3)测试：

【1】新建一个app.less文件

【2】引入App.js并加入使用样式

【3】重启项目：

【4】npm run build打包项目获得 build 文件件，在其中开启一个http-server服务，在浏览器中依然看到如上图的页面；

以上，less引入成功。

 

4、配置react-router（react-router 4.x）

(1)安装react-router-dom

npm install react-router-dom --save

(2)添加Components

(3)修改index.js

最终呈现的页面：

--------------------------------------------------------------------------我是分割线--------------------------------------------------------------------------------

--------------------------------------------------------------------------我是分割线--------------------------------------------------------------------------------

 

5、配置redux

(1)安装react-redux

npm install redux react-redux --save

(2)扩展：

------了解下redux的几个基本概念

【1】state
当前数据的快照
初始化在reducer中插入

Const InitialState = [{
    Text:1
}]

【2】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
    }
}

【3】action
触发相对应的reducer，

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

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

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

 

--------react-redux

其主要作用就是将组件和store链接起来，

一、方法：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 的行为。

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

 

 

项目地址：

https://github.com/lanlanlan7/reactDemo