上海《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 方法:展开运算符(…)
      展开运算符,把数组展开成多个参数

      1. var arr = [1,2,3]
      2. var arr2 = [10,...arr]
      3. 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

          1. let store = Redux.createStore(function(state,action){
          2. return state;
          3. })
          • 调用 createStore 时,会首次执行 reducer,这时,state并没有值,我们需要通过对 state 设置初始值,并通过 reducer 的 return,把 state 存入 store 中
      • store 下的方法

        • getState() 获取 store 中存放的 state
        • dispatch(obj) 修改数据

          • 接受一个对象参数,该对象必须包含一个 type 属性, type 就是操作类型的说明
          • 我们把 dispatch 传入的参数称为 action

            1. store.dispatch ({
            2. type:"add",
            3. value:''
            4. })
            5. //操作类型 add
            6. //通过判断操作类型,操作数据
            7. switch(action.type){
            8. case 'add':
            9. return [action.newValue,...users]
            10. break;
            11. }

12:30 战场休息,补充体力


  • 14:00 吃饱喝足,我们继续

    • redux 数据的管理和维护

      • 这里要注意 redux 中不建议我们直接对 state 进行修改,而是每次返回一个新的对象
      • Object.assign() 把一个或多个源对象的可枚举属性值复制到目标对象中,返回值是我们的目标对象

        1. Object.assign({},data,{user:[action.data,...state.users]})
        2. Object.assign(目标对象,原有对象,对原有对象的修改)
        • {} 创建一个空对象
        • 后面两个参数合并,后面的合并前面的
      • 当 state 中有多个属性时我们可以对 reducer 的操作进行分拆

        1. function complete(complete,action){
        2. return complete;
        3. }
        4. function uncomplete(uncomplete,action){
        5. return uncomplete;
        6. }
        7. const reducer = function(state = {
        8. complete:[],
        9. uncomplete:[]
        10. },action){
        11. return {
        12. complete: complete(state.complete,action)
        13. uncomplete: uncomplete(uncomplete,action)
        14. }
        15. }
        16. const store = Redux.createStore(reducer);
      • combineReducers 合并拆分过后的 reducer

        1. function complete(complete = [],action){
        2. return complete;
        3. }
        4. function uncomplete(uncomplete = [],action){
        5. return uncomplete;
        6. }
        7. const reducer = Redux.combineReducers({
        8. complete,
        9. uncomplete
        10. });
        11. 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 方法包装组件
        1. export default connect(select)(App);
      • select:函数,返回注入组件中的数据
      • 通过 connect 的注入,在组件中即可通过组件的 props 得到 dispatch 与注入的数据了
    • 异步更新 state
      通过 dispatch 更新数据,只是同步更新,但是在真正的项目中我们常常需要做的是异步更新,在 rudex 如何进行异步更新?我们就需要了解一个东西 middleware 中间层

      • middleware 提供的是位于 action 被发起之后,到达 reducer 之前的扩展点

        1. let dispatch = (action)=>{
        2. console.log(1)
        3. this.props.dispatch(action)
        4. console.log(2)
        5. }
      • 看个例子:[redux-logger]

      • applayMidlleware(中间件) redux 下的方法,专门管理中间件
        • redux-thunk
          普通的 action 是同步的,如果在 action 中需要使用异步操作,那么需要使用一个异步的 action 中间件:redux-thunk
          默认情况下 action 只能为了一个 Plain Object – 纯对象,通过 thunk 可以让 action 接收一个 函数
    • 案例:知乎日报

18:00 放学回家

下次课程预告

  • 基于 react 开发的电商购物系统

有想一起交流的小伙伴们,可以加我们的 React 技术交流群微信群哦~打开微信扫码入群,和我们一块来学习 React;

妙味 React 微信讨论群

(PS:群人数过多,请加小美微信邀请入群)

妙味 React 讨论群


上海《React+redux 高阶实战周末班》课程视频(连载中)

>>12-环境按照及路由拆分
>>13-路由中传递参数
>>14-pathname判断显示数据
>>15-histroy对象使用
>>16-重定向即完善整个路由版列表操作


相关推荐

>>上海《React+redux 高阶实战周末班》课程记录(一)

>>上海《React+redux 高阶实战周末班》课程记录(二)

>>上海《React+redux 高阶实战周末班》课程记录(三)

>>上海《React+redux 高阶实战周末班》课程记录(四)

广而告之:

Vue 系统修炼与精彩实战-周末班

学习路径始于“初阶” > 迈入 “晋级” > 逐渐 “深入” > 陷于 “沉迷”

  • 初阶:Vue 语法从零到熟练;
  • 晋级:vue-cli 脚手架创建无痛 webpack 配置目录结构;
  • 深入:vue-router 单页应用的前端路由管理利器;
  • 沉迷:vuex 集中式应用状态管理器;

详情了解:http://miaov.com/index.php/news/newsDetail/nid/284


妙味(2017 年 12 月底)JavaScript 实体班 - 即将开课

详情了解:http://www.miaov.com/index.php/course/coursedetail/cid/34


课程咨询:

咨询QQ:2852509866

微信咨询:miaov-class

电话咨询:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

25647892 25647892

25647892

010-57658918

在线微信客服
客服1
客服在线时间

周一至周六上午:9:00~12:00

下午:13:30~18:00

妙味公众号