Day15. Redux的使用

补充

过渡动画和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