基于React-redux的todolist的项目搭建和开发步骤

一、安装步骤

（1）npm install -g create-react-app      全局安装

（2）create-react-app reactproject       新建并对react项目进行命名（注:项目名称不能有大写）

（3）cd reactproject                             通过命令进入文件夹内部，准备运行项目

（4）npm start                                     运行项目

二、webpack相关配置

（1）npm run eject (可选)    如果要对webpack进行设置，可以使用命令 npm run eject把webpack文件暴露出来，操作是不可逆的

（2）安装redux-saga

npm install --save redux-saga

 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。

（3）安装react-redux 

npm install --save react-redux

（4）各种插件

1. npm install -g less    //node环境中使用less

2. npm install antd --save   // antd组件  卸载antd： npm remove antd

注意：npm install babel-plugin-import --save //引入antd样式

3. npm install --save react-router  //安装react-router

4.npm install react-router-dom --save-dev  // 安装react-router-dom 路由实现页面间跳转

5. npm install eslint -g // 安装eslint

6. npm install --save redux //安装redux

7. npm install redux-thunk --save //安装redux-thunk

三、开发react-redux-todolist

（先实现功能开发，在理解学习原理和作用并做记录）

（一）理解redux

1.Provider

Provider作用将store传入整个应用

2.createStore()

存放单一数据源的store，由createStore创建

3.subscribe()

接收一个listener，它的作用是给store添加监听函数

4.combineReducers()

把多个reducer函数合并成一个最终的reducer函数，然后可以对最终的reducer调用createStore()

combineReducers({todos,counter})将todos和counter两个函数（reducer）合并成一个reducer.

5.dispatch()

将action发送给state

6.connect()

绑定 State 到 View

7.reducers

把 action 和 state 串起来，reducer 只是一个接收 state 和 action，并返回新的 state 的函数。

Reducers是如何处理action的

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

todoAPP就是定义的reducer ，接收两个参数：state和action,然后基于type决定如何处理action。

8.action

Action 是用来描述 UI 层事件的一个对象。连接UI的变化，通过dispatch方法发送一个action。

是一个拥有 type 属性的对象，用来描述发生了什么，然后按 type 决定如何处理 action。

获取数据是一个 action，一个点击是一个 action，一个 input 变化也是一个 action 等。

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

9.Object.asign(目标对象，源对象)

方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

（1）复制一个对象

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

（2）合并具有相同属性的对象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

属性被后续参数中具有相同属性的其他对象覆盖。