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设计有关系
1. 可以
1. 官方提到过要不要把所有的数据放到Redux, 没有一个准确的答案, 跟本身你想要怎么设计它有关系
  
  image.png
Redux难的知识点, 边看视频边跟着写出来代码 -> 不看视频再把代码写一遍

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

基本做法

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

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

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

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

函数的基础之上进行优化: 修改原有的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
修改原有的代码逻辑

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

封装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));

希望中间可以做一些异步的操作, 封装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);

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

封装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