Day15. Redux的使用

2020-07-13 本文已影响0人 JackLeeVip

补充

过渡动画和axios的补充

CSSTransition
SwitchTransition
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);