上海《React+redux 高阶实战周末班》课程记录（五）－妙味新闻

本次我们要学习的是 Todolist 案例（路由版本）、Redux、React-Redux ， React 的学习已经深入佳境，要点难点循序渐进，话不多说，上干货~(PS：文章结尾有 VIP 视频哦~)

本周课程记录（12 月 23 日）

本次课程要点

Todolist 案例（路由版本）
Redux
React-Redux

课程时间轴

10：00 开始上课喽
- Todolist 案例（路由版本）
  - create-react-app name 利用脚手架工具创建项目
  - npm i react-router-dom 安装 React 路由组件
  - <BrowserRoute></BrowserRoute> 在根组件外包括 BrowserRoute
  - 引入 NavLink 组件
  - 使用 NavLink 路由进行跳转
  - 创建两个组件 List（列表展示），Add（添加界面）
  - 引入 Route，根据路径匹配组件渲染
  - 当路径为/显示 List 组件，当路径/add 显示 Add 组件
  - 当我们需要在组件中传参的话就最好使用 render，而不是 component，移入组件
  - 添加数据完成后通过 history.push 方法重定向回列表页面
- ES6 方法：展开运算符（…）
  展开运算符，把数组展开成多个参数
```
  var arr = [1,2,3]
  var arr2 = [10,...arr]
  console.log(arr2)//[10,1,2,3]
```

11：00 休息十分钟

11：10 稍作休息之后我们继续战斗
在 React 中数据的交互是通过组件之间的通信来完成的，但是随着组件越来越多，业务逻辑越来越复杂，同时组件的嵌套也越来越复杂，数据的通信变得特别繁琐，把数据的管理和维护工作提取出来单独进行，就变得特别重要了
- redux 状态管理
- https://redux.js.org/
- http://www.redux.org.cn
  我们把应用中需要用到的数据称为 state，随着应用的变化，数据将会变得复杂，为了能够对这种日趋复杂的数据进行有效的维护和管理，我们把 state 存储在一个 Object Tree 中，并且通过一个叫 store 的来管理这个 Object Tree
  注意：Redux 是一个独立的工具，并不是必须依赖 React
- Redux 使用说明
  - 安装 Redux：npm install redux
  - state：在Redux中，数据都是存放在 state 中
  - store：用来存放 state 的容器
    - createStore：用来创建 store
    - action：定义对 state 的修改操作
    - reducer：createStore 的参数即回调函数，用来处理数据的业务逻辑，修改和设置 state
```
let store = Redux.createStore(function(state,action){
    return state;
})
```
      - 调用 createStore 时，会首次执行 reducer，这时，state并没有值，我们需要通过对 state 设置初始值，并通过 reducer 的 return，把 state 存入 store 中
  - store 下的方法
    - getState() 获取 store 中存放的 state
    - dispatch(obj) 修改数据
      - 接受一个对象参数，该对象必须包含一个 type 属性， type 就是操作类型的说明
      - 我们把 dispatch 传入的参数称为 action
        
        store.dispatch ({
        type:"add",
        value:''
        })
        //操作类型 add
        //通过判断操作类型，操作数据
        switch(action.type){
        case 'add':
        return [action.newValue,...users]
        break;
        }

12：30 战场休息，补充体力

14：00 吃饱喝足，我们继续

redux 数据的管理和维护

这里要注意 redux 中不建议我们直接对 state 进行修改，而是每次返回一个新的对象
Object.assign() 把一个或多个源对象的可枚举属性值复制到目标对象中，返回值是我们的目标对象
```
Object.assign({},data,{user:[action.data,...state.users]})
Object.assign(目标对象，原有对象，对原有对象的修改)
```
- {} 创建一个空对象
- 后面两个参数合并，后面的合并前面的

当 state 中有多个属性时我们可以对 reducer 的操作进行分拆

function complete(complete,action){
  return complete;
}
function uncomplete(uncomplete,action){
  return uncomplete;
}
const reducer = function(state = {
  complete:[],
  uncomplete:[]
},action){
  return {
      complete: complete(state.complete,action)
      uncomplete: uncomplete(uncomplete,action)        
  }
}    
const store = Redux.createStore(reducer);

combineReducers 合并拆分过后的 reducer

  function complete(complete = [],action){
      return complete;
  }
  function uncomplete(uncomplete = [],action){
      return uncomplete;
  }
  const reducer = Redux.combineReducers({
      complete,
      uncomplete    
  });
  const store = Redux.createStore(reducer);

15：10 休息休息

15：15 继续
- React 和 Redux 的合并使用
  - 安装 React-Redux npm i React-Redux;
  - 引入 createStore，通过它创建 store
  - 引入 combineReducer，用来合并函数
  - 创建 store
  - 将应用根组件包装进 Provider 组件中
  - 过 Provider 组件的 store 属性绑定 store
  - 通过 react-redux 提供的 connect 方法包装组件
```
  export default connect(select)(App);
```
  - select：函数，返回注入组件中的数据
  - 通过 connect 的注入，在组件中即可通过组件的 props 得到 dispatch 与注入的数据了
- 异步更新 state
  通过 dispatch 更新数据，只是同步更新，但是在真正的项目中我们常常需要做的是异步更新，在 rudex 如何进行异步更新？我们就需要了解一个东西 middleware 中间层
  - middleware 提供的是位于 action 被发起之后，到达 reducer 之前的扩展点
```
let dispatch = (action)=>{
  console.log(1)
  this.props.dispatch(action)
  console.log(2)
}
```
  - 看个例子：[redux-logger]
  - applayMidlleware(中间件) redux 下的方法，专门管理中间件
    - redux-thunk
      普通的 action 是同步的，如果在 action 中需要使用异步操作，那么需要使用一个异步的 action 中间件：redux-thunk
      默认情况下 action 只能为了一个 Plain Object – 纯对象，通过 thunk 可以让 action 接收一个函数
      - 地址：https://github.com/gaearon/redux-thunk
      - 函数 action 中的参数
        
        dispatch
        getState
- 案例:知乎日报
  ；