useReducer使用

useReducer

首先创建一个button和n的state

import React,{useState} from "react";
import "./styles.css";

export default function App() {
  const [n,setN] = useState(0)
  const onClick =()=>{
    setN(x=>x+1)
    
  }
  return (
    

      
n: {n}
      +1
    
  );
}

image.png

1. 创建初始值initalState

const initial ={
  n:0
}

2. 创建所有操作reducer(state,action)

const reducer = (state,action) => {
  if(action.type === 'add') {
    return {n:state.n+1}
  } else if(action.type==='mult') {
    return {n:state.n*2}
  } else {
    throw new Error('error')
  }
}

创建一个带有+1 和 *2 功能的reducer

3.将创建的reduder传给userReducer得到读写方法

useReducer接受两个参数，一个是reducer,另一个是initial，

 const [state,dispatch] = useReducer(reducer,initial)
 const {n} = state

返回两个参数，一个是state保存值，另一个是dispatch

image.png

取出state中的n后，我们发现它就是initial中的n.和我们一开始使用的useState的值相同

4. dispatch({type:'操作方法'})

我们修改一下之前的onClick方法，调用dispatch

const onClick =()=>{  
    dispatch({type:'add'})
  }

image.png

此时能够看到，点击后触发了+1的操作，达到了之前useState的setN的效果

我们可以将加的参数传给onClick,然后在reducer中增加传入的参数

const reducer = (state,action) => {
  if(action.type === 'add') {
    return {n:state.n+action.number}
  } else if(action.type==='mult') {
    return {n:state.n*2}
  } else {
    throw new Error('error')
  }
}

const onClickAdd =(number)=>{  
    dispatch({type:'add',number})
  }

我们再创一个按钮，用来做乘的操作

 onClickMult(2)}>mult * 2 

修改一下reducer和onClick

 const onClickMult = (number)=>{
    dispatch({type:'mult',number})
  }
 const reducer = (state,action) => {
  if(action.type === 'add') {
    return {n:state.n+action.number}
  } else if(action.type==='mult') {
    return {n:state.n*action.number}
  } else {
    throw new Error('error')
  }
}

先+1，在乘2

image.png

此时我们的click方法非常的简单，因为操作被我们聚拢在reducer中，我们在click中只触发dispatch，然后调用相对应的reducer

通常情况下，useReducer适合用来处理表单

image.png

      

        
          姓名
          
              dispatch({ type: "patch", formData: { name: e.target.value } })
            }
          />
        
      
      

        
          年龄
          
              dispatch({ type: "patch", formData: { age: e.target.value } })
            }
          />
        
      
      

        
          民族
          
              dispatch({
                type: "patch",
                formData: { nationality: e.target.value }
              })
            }
          />
        
      
      

        提交
        重置
      
      

      {JSON.stringify(formData)}
    

我们可以将reducer分为2个操作，patch（更新任意一项表单），reset（重置所有表单）

const initFormData = {
  name: "",
  age: 18,
  nationality: "汉族"
};

function reducer(state, action) {
  switch (action.type) {
    case "patch":
      return { ...state, ...action.formData };
    case "reset":
      return initFormData;
    default:
      throw new Error();
  }
}

image.png

我们修改姓名，此时触发patch操作