react学习—Reducer Hook

Reducer Hook

一、Reducer Hook

Flux:Facebook出品的一个数据流框架

  1. 规定了数据是单向流动的
  2. 数据存储在数据仓库中(目前,可以认为state就是一个存储数据的仓库)
  3. action是改变数据的唯一原因(本质上就是一个对象,action有两个属性)
    1. type:字符串,动作的类型
    2. payload:任意类型,动作发生后的附加信息
    3. 例如,如果是添加一个学生,action可以描述为:
      1. { type:"addStudent", payload: {学生对象的各种信息} }
    4. 例如,如果要删除一个学生,action可以描述为:
      1. { type:"deleteStudent", payload: 学生id }
  4. 具体改变数据的是一个函数,该函数叫做reducer
    1. 该函数接收两个参数
      1. state:表示当前数据仓库中的数据
      2. action:描述了如何去改变数据,以及改变数据的一些附加信息
    2. 该函数必须有一个返回结果,用于表示数据仓库变化之后的数据
      1. Flux要求,对象是不可变的,如果返回对象,必须创建新的对象
    3. reducer必须是纯函数,不能有任何副作用
  5. 如果要触发reducer,不可以直接调用,而是应该调用一个辅助函数dispatch
    1. 该函数仅接收一个参数:action
    2. 该函数会间接去调用reducer,以达到改变数据的目的
//useReducer
import { useState } from "react"
/**
 * 通用的useReducer函数
 * @param {function} reducer reducer函数,标准格式
 * @param {any} initialState 初始状态
 * @param {function} initFunc 用于计算初始值的函数
 */
export default function useReducer(reducer, initialState, initFunc) {
    const [state, setState] = useState(initFunc? initFunc(initialState): initialState)
    function dispatch(action) {
        const newState = reducer(state, action)
        console.log(`日志:n的值  ${state}->${newState}`)
        setState(newState);
    }

    return [state, dispatch];
}
//App
import React from 'react'
import useReducer from './Hooks/useReducer';
function reducer(state,action) {
  switch(action.type){
    case "increase":
      return state+1;
    case "decrease":
      if(state === 0){
        return 0
      }
      return state - 1
    default:
      return state;
  }
}
export default function App() {
  const [n,dispatch] = useReducer(reducer, 10,()=>{
    return 100
  })
  return (
    <div>
      <button onClick={()=>{
        dispatch({type: "decrease"})
      }}>-</button>
      <span>{n}</span>
      <button onClick={()=>{
        dispatch({type: "increase"})
      }}>+</button>
    </div>
  )
}

在这里插入图片描述
当然,react已经给我们实现,我们可以直接使用

import React,{useReducer} from 'react'

function reducer(state,action) {
  switch(action.type){
    case "increase":
      return state+1;
    case "decrease":
      if(state === 0){
        return 0
      }
      return state - 1
    default:
      return state;
  }
}
export default function App() {
  const [n,dispatch] = useReducer(reducer, 10)
  return (
    <div>
      <button onClick={()=>{
        dispatch({type: "decrease"})
      }}>-</button>
      <span>{n}</span>
      <button onClick={()=>{
        dispatch({type: "increase"})
      }}>+</button>
    </div>
  )
}

在这里插入图片描述
博主开始运营自己的公众号啦,感兴趣的可以关注“飞羽逐星”微信公众号哦,拿起手机就能阅读感兴趣的博客啦!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值