Redux在React Hook中的使用及其原理

Redux在React Hook中的使用及其原理

Hello, 各位勇敢的小伙伴, 大家好, 我是你们的嘴强王者小五, 身体健康, 脑子没病.

本人有丰富的脱发技巧, 能让你一跃成为资深大咖.

一看就会一写就废是本人的主旨, 菜到抠脚是本人的特点, 卑微中透着一丝丝刚强, 傻人有傻福是对我最大的安慰.

欢迎来到小五的随笔系列之Redux在React Hook中的使用及其原理.

浅谈Redux

下面将从what, why, how to 三个方面来说说Redux

第一问 what ❓ 什么是Redux

将一个web应用拆分成视图层与数据层, Redux就是保存其数据的一个容器, 其本质就是维护一个存储数据的对象.

• State : 一个存放数据的容器 (一个对象)

const initState = {
   
  count: 0,
}

• Action : 一个 want to do 的过程 (计划要做一个什么样的操作)
  • ActionType是对Action的描述, 也是连接Action和Reducer的桥梁
  • 本质上是一个由ActionType和payload(数据)组成的对象

export const increaseConstant = 'INCREASE' // ActionType

{
   
   type: increaseConstant,
   payload,
}  // Action

• Reducer : 一个 to do 的过程 (执行Action计划的操作)

case increaseConstant: // 当 ActionType 为 'INCREASE' 时, 执行count++
  return {
   
    ...state,
    count: payload + 1
  }

第二问 why ❓ 为什么要使用Redux

当你不知道是否需要使用Redux的时候, 那就是不需要使用.

下面一组动图很好的描述了一个应用程序的开发过程, 及何时需要Redux.
图片来源及原文链接

• 游戏初期阶段, 数据单向传递, 父传子

• 游戏进入中期, 开始有少量非父子组件间需要通讯一些数据

• 游戏进入后期, 开始需要大量的数据通讯

• 此时, 就是Redux的用武之地了, 使用Redux后流程如下

第三问 how to ❓ 怎么使用Redux

在说使用方法之前, 我们先来从头到尾模拟一个Redux的过程, 只要理解原理, 使用起来那不是小菜一碟.

Let’s go, come on baby!

下面我们就用一个简单的计数器的例子来模拟实现一个Redux的过程:

创建一个count组件

import React, {
    useState } from 'react'

const CountItem = (props) => {
   
  const {
   
    count,
    increase,
  } = props

  return (
    <>
      {
   count}
      <button onClick={
   increase}>Co