美文网首页
Day15. Redux的使用

Day15. Redux的使用

作者: JackLeeVip | 来源:发表于2020-07-13 22:35 被阅读0次

    补充

    过渡动画和axios的补充

    1. CSSTransition
    2. SwitchTransition
    3. TransitionGroup
    • 应该用唯一的标识作为key, 最好不用index


      这里要加上key.png

    axios的get如何联系在一起

    源码.png

    Redux的使用

    为什么需要redux

    • 是一个难点
    • JavaScript开发的应用程序, 已经变得越来越复杂了:
      • JavaScript需要管理的状态越来越多, 越来越复杂;
      • 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等, 也包括一些UI的状态, 比如某些元素是否被选中, 是否显示加载动效, 当前分页;
    • 管理不断变化的state是非常困难的:
      • 状态之间相互会存在依赖, 一个状态的变化会引起另一个状态的变化, View页面也有可能会引起状态的变化;
      • 当应用程序复杂时, state在什么时候, 因为什么原因而发生了变化, 发生了怎么样的变化, 会变得非常难以控制和追踪;
    • React是在视图层帮助我们解决了DOM的渲染过程, 但是State依然是留给我们自己来管理:
      • 无论是组件定义自己的state, 还是组件之间的通信通过props进行传递; 也包括通过Context进行数据之间的共享;
      • React主要负责帮助我们管理视图, state如何维护最终还是我们自己来决定;


        难以控制和追踪.png
    • UI = render(state)
    • Redux就是一个帮助我们管理State的容器: Redux是JavaScript的状态容器, 提供了可预测的状态管理;
    • Redux除了和React一起使用之外, 它也可以和其他界面库一起来使用(比如Vue), 并且它非常小(包括依赖在内, 只有2kb)

    Redux的核心理念 - Store

    • Redux的核心理念非常简单.
    • 比如我们有一个朋友列表需要管理:
      • 如果我们没有定义统一的规范来操作这段数据, 那么整个数据的变化就是无法跟踪的;
      • 比如页面的某处通过products.push的方式增加了一条数据;
      • 比如另一个页面通过products[0].age = 25修改了一条数据;
    • 整个应用程序错综复杂, 当出现bug时, 很难追踪


      image.png

    Redux的核心理念 - action

    • Redux要求我们通过action来更新数据:
      • 所有数据的变化, 必须通过派发(dispatch)action来更新;
      • action是一个普通的JavaScript对象, 用来描述这次更新的type和content;
    • 比如下面就是几个更新friends的action:
      • 强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化, 所有的数据变化都是可追踪、可预测的;
      • 当然, 目前我们的action是固定的对象, 真实应用中, 我们会通过函数来定义, 返回一个action;


        监控修改.png

    Redux的核心理念 - reducer

    • reducer是一个纯函数(不能在纯函数运行的过程中产生任何副作用);


      image.png

    Redux的三大原则

    • 单一数据源
      • 整个应用程序的state被存储在一棵object tree中, 并且这个object tree只存储在一个store中;
      • Redux并没有强制让我们不能创建多个Store, 但是那样做并不利于数据的维护;
      • 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;
    • State是只读的
      • 为已修改State的方法一定是出发action, 不要试图在其他地方通过任何的方式来修改State;
      • 这样就确保了View或网络请求都不能直接修改state, 它们只能通过action来描述自己想要如何修改state;
    • 这样可以保证所有的修改都被集中化处理, 并且按照严格的顺序来执行, 所以不要担心ract condition(竟态)的问题;


      使用纯函数来执行修改.png

    创建一个redux项目

    • yarn add redux
    • 所有的都是yesyarn int -y

    index.js中使用redux

    // 1. 导入redux(不能通过ES6的方式)
    // commonjs一种实现 -> nodejs
    const redux = require('redux');
    
    const initialState = {
      counter: 0
    }
    
    // reducer
    function reducer(state = initialState, action) {
      switch(action.type) {
        case "INCREMENT":
          return {...state, counter: state.counter + 1}
        case "DECREMENT":
          return {...state, counter: state.counter - 1}
        case "ADD_NUMBER":
          return {...state, counter: state.counter   action.num}
        case "SUB_NUMBER":
          return {...state, counter: state.counter - action.num}
        default: 
          return state;
      }
    }
    
    // store(创建的时候需要传入一个reducer)
    const store = redux.createStore()
    
    // 订阅store的修改
    store.subscribe(() => {
      console.log("counter:", store.getState().counter);
    })
    
    // actions
    const action1 = {type: "INCREMENT"};
    const action2 = {type: "DECREMENT"};
    
    const action3 = {type: "ADD_NUMBER", num: 5};
    const action4 = {type: "SUB_NUMBER", num: 5};
    
    // 派发action
    store.dispatch(action1);
    store.dispatch(action2);
    store.dispatch(action3);
    store.dispatch(action4);
    
    

    代码结构优化

    • basic_redux.js文件
    • 抽到一个个的文件里面, 文件之间的相互引入
    • node对 import/export 13.2.x开始支持
    • 来到package.json里增加一个属性type, 执行命令式增加一个配置参数
    • action写成函数的好处, 复用性
    • actionCreators.js中管理


      image.png
    小括号不能删掉, 括起来才能当做对象.png
    • 另一个独立的文件 constants.js
    • 没有参数按照规范也写成函数


      目录结构拆解划分.png

    Redux代码和React代码结合起来

    调用流程.png
    • redux在实际开发中的流程:


      调用流程图.png
    • 真实的导入, 没做node的处理, 有一点点不一样


      真实导入.png
    真实开发目录结构.png

    相关文章

      网友评论

          本文标题:Day15. Redux的使用

          本文链接:https://www.haomeiwen.com/subject/qwuzcktx.html