链接: 文档链接.

useReducer

很多人看到useReducer的第一反应应该是redux的替代品，其实并不是；
useReducer仅仅是useState的一种替代方案；

• 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
• 或者这次修改的state需要依赖之前的state时，也可以使用；

useReducer的基本使用

function counterReducer (state,action){
  switch (action.type) {
    case "increment":
      return {...state,counter:state.counter+action.speed}
      case "decrement":
        return {...state,counter:state.counter-action.speed}
    default:
      return state;
  }
}
export default function App() {
  let [state,dispath]=useReducer(counterReducer,{counter:96})
  return (
    <div>
      <h2>你好-{state.counter}</h2>
      <button onClick={()=>{
        dispath({type:'increment',speed:2})
      }}>+</button>
      <button onClick={()=>{
        dispath({type:'decrement',speed:1})
      }}>-</button>
    </div>
  );
}

拆分useReducer方案一

单独创建一个reducer/counter.js文件；

export default counterReducer(state,action){
	switch(){
		case "increment":
			return {...state,counter:state.counter+1}
		case "decrement":
			return {...state,counter:state.counter-1}
		default:
			return state;
	}
}

home.js

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'

export default function Home() {
  const [state, dispatch] = useReducer(counterReducer, {counter: 100});

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
    </div>
  )
}

我们来看一下，如果我们创建另一个profile.js也使用这个函数，是否进行数据的共享；

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'

export default function Profile() {
  const [state, dispatch] = useReducer(counterReducer, {counter: 0});

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
    </div>
  )
}

拆分useReducer方案二

单独创建一个useReducerText.jsx文件；

import React,{useReducer} from 'react'
function counterReducer (state,action){
  switch (action.type) {
    case "increment":
      return {...state,counter:state.counter+action.speed}
      case "decrement":
        return {...state,counter:state.counter-action.speed}
    default:
      return state;
  }
}

export default function useReducerText() {
  const [state,dispath]=useReducer(counterReducer,{counter:9})
  return [state,dispath]
}

home.jsx

import React from 'react'
import useReducerText from '../useReducerText.jsx'
export default function Home() {
  let [state,dispatch]=useReducerText()
  return (
    <div>
      <p>{state.counter}</p>
      <button onClick={()=>{
        dispatch({
          type:'increment',
          speed:2
        })
      }}>+</button>
      <button  onClick={()=>{
        dispatch({
          type:'decrement',
          speed:1
        })
      }}>-</button>
    </div>
  )
}

about.jsx

import React from 'react'
import useReducerText from '../useReducerText.jsx'
export default function About() {
  let [state,dispatch]=useReducerText()
  return (
    <div>
      <p>{state.counter}</p>
      <button onClick={()=>{
        dispatch({
          type:'increment',
          speed:4
        })
      }}>+</button>
      <button  onClick={()=>{
        dispatch({
          type:'decrement',
          speed:2
        })
      }}>-</button>
    </div>
  )
}

由拆分方案一和方案二可知，数据是不会共享的，它们只是使用了相同的counterReducer的函数而已；
所以，useReducer只是useState的一种替代品，并不能替代redux

标签：专题,return,counter,useReducer,dispatch,ReactHooks,state,type
来源： https://blog.csdn.net/big_sun_962464/article/details/122805064