Day17. Redux深入

如何使用redux-thunk

使用.png

• 中间件的使用, redux-thunk

redux-devtools

redux-devtools.png

• redux开发过程中, 帮助我们跟踪状态变化, 每次变化记录在哪里?
• 方便调试 => Chrome插件 redux-devtools, 官网中有提到
• Github可以看使用, 代码里面也要做相关的配置

• 安装完插件后, 在window

  
  
  Usage.png
  
  
  image.png

逻辑或.png

代码配置.png

初始化状态.png

generator

generator.png

• ES6里面多增加的一个语法
• 平时开发并不是常用
• saga中间件使用了RS6的generator语法, 所以我们要简单了解一下:
• • 注意: 我们这里并没有列出generator的所有用法, 事实上它的用法非常的灵活, 可以自行去学习.

返回结果是一个对象.png

• generator和Promise一起来使用, 写出来的代码看起来比较优雅.
• Python里面写的多点, 主要为了理解Saga的使用过程

redux-saga的使用

saga.png

-redux-saga, 对代码进行分离, 代码写到另外一个地方

• 安装 yarn add redux-saga
• 导入的是一个函数
• sageMiddleware.run()跑起来

补充两个小知识点

• yield takeLatest() 一次只能监听一个对应的action
• yield takeEvery(FETCH_HOME_MULTIDATA, fetchHomeMultidata) 每一个都会被执行

• 当前只监听了一个action, 监听多个action

  
  
  image.png

• sage优势, 代码分离, 解耦

  
  
  saga引入和使用.png

问题.png

• 1. 跟state设计有关系
• 2. 可以

• 3. 官方提到过要不要把所有的数据放到Redux, 没有一个准确的答案, 跟本身你想要怎么设计它有关系

     
     
     image.png

• Redux难的知识点, 边看视频边跟着写出来代码 -> 不看视频再把代码写一遍

redux中间件的实现原理及简单实现方式

• 基本做法

1. 第二种做法, 封装一个函数

function dispatchAndLogging() {
  console.log("dispatch前--dispatching action:", action);
  store.dispatch(action);
  console.log("dispatch后--new state:", store.getState());
}

dispatchAndLogging(addAction(10));
dispatchAndLogging(addAction(5));

• 实现了, 但使不太好, 耦合度太高

=>

2. 函数的基础之上进行优化: 修改原有的dispatch

const next = store.dispatch;
function dispatchAndLogging() {
  console.log("dispatch前--dispatching action:", action);
  next(action);
  console.log("dispatch后--new state:", store.getState());
}
store.dispatch = dispatchAndLogging;

store.dispatch(addAction(10));
store.dispatch(addAction(5));

• hack技术: monkeyingPatch
• 修改原有的代码逻辑

=>

3. 将之前的操作进行一个封装

• 封装patchLoggin的代码

function patchLogging(store) {
  const next = store.dispatch;
  function dispatchAndLogging() {
    console.log("dispatch前--dispatching action:", action);
    next(action);
    console.log("dispatch后--new state:", store.getState());
  }
  store.dispatch = dispatchAndLogging;
}

patchLogging(store);

store.dispatch(addAction(10));
store.dispatch(addAction(5));

4. 希望中间可以做一些异步的操作, 封装patchThunk的功能

// 封装patchThunk的功能
function patchThunk(store) {
  const next = store.dispatch;

  function dispatchAndThunk(action) {
    if (typeof action === "function") {
      action(store.dispatch, store.getState);
    } else {
      next(action);
    }
  }

  store.dispatch = dispatchANdThunk;
}

patchLogging(store);
patchThunk(store);

function foo(dispatch, getState) {
  console.log(dispatch, getState);
  dispatch(subAction(10));
}

store.dispatch(foo);

• 开发中在做中间件的时候不一样

5. 封装applyMiddleware

// 可变参数, 最后会放到数组中
function applyMiddleware(...middlewares) {
 // 不会做修改无所谓 
 //const newMiddleware = [...middlewares];
 middlewares.forEach(middleware => {
    store.dispatch = middleware(store);
  })
}

applyMiddlewares(patchLogging, patchTHunk);

Reducer代码拆分

• 为什么起名叫Reducer?

  
  
  官方解释.png
• 推荐MDN网站 地址

preValue, item) => {} 称之为reducer
["aaa", "bbb"].reduce((preValue, item) => {}, 0)

reducer.png

• 对reducer做一个拆解, 两步拆解
• 把要处理的逻辑放到一个独立的函数里面进行处理

// 拆分counterReducer
const initialCounterState = {
  counter: 0
}
function counterReducer(state, action) {
  switch (action.type) {
    CASE add_number:
      return { ...state, counter: state.counter + action.num };
    CASE sub_number:
      return { ...state, counter: state.counter - action.num };

    default:
      return state;
  }
}

// 拆分homeReducer
const initialHomeState = {
  home:
}

const defaultState = {
  counterInfo: null,
 homeInfo: {}
}

function reducer(state = {}, action) {
  return {
    counterInfo: counterReducer(state.counterInfo, action),
    homeInfo: homeReducer(state.homeInfo, action),
  }
}

过程.png

• 终端yarn insatll 安装 yarn start 启动

文件结构重构

• store文件夹中创建counter文件夹

  
  
  文件结构.png

• 优化导入

  
  
  image.png

结构更清晰.png

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png