userReducer Hook

userReducer Hook

我们会问它是干嘛的？解决的是状态共享?

 Reducer : 二个参数（state,action) 一个返回值 return值。

先来上个例子：

import React, { useReducer } from 'react';

function Counter() {
  const [sum, dispatch] = useReducer((state, action) => {
    return state + action;
  }, 0);

  return (
    <>
      {sum}

      <button onClick={() => dispatch(1)}>
        Add 1
      </button>
    </>
  );
}

我们先来理解下：

1）数组中有二个参数：sum及dispath, 对应用的是useReducer，这个里面接收二个值，一个是箭头函数Reducer，一个是默认值。

sum对应state,dispath对应action

2）这里的sum的默认值是0,也就是第二个参数，当我们dispatch（1）的时候，自动会计算state+action，一开始是0+1=1,然后是1+1=2

这样sum的值也是2，显示出来也是2。

state可以是任何值，它不一定是一个对象，可以是一个数字，一个数组，或者其他任何类型。

 

再来一个例子：

import React, { useReducer } from 'react';

function ReducerDemo(){

    const [count, dispatch] = useReducer((state, action)=>{
        switch(action){
            case 'add':
                return state+1
            case 'sub':
                if(state<=1){
                    return 0;
                }
                return state-1
            default:
                return state
        }
    },0)
        
            
    return(
        <div className="Example-left10">
            <h2>现在的分数是{count}</h2>
            <button onClick={()=>{dispatch('add')}} className="Example-left10">Add 1</button>
            <button onClick={()=>{dispatch('sub')}} className="Example-left10">Dec 1</button>
        </div>
    )
}

export default ReducerDemo

以上的例子都是我改造于网络，感谢各位小伙伴。

 

参考：

https://segmentfault.com/a/1190000020088192