(精华)2020年7月29日 React react-hooks的useReducer的使用

import React , {useReducer} from 'react'
// (state,action)=>newState
const UseReducer = ()=>{
    const reducer = (state,action) =>{
        if(action.type === 'add'){
            return {
                ...state,
                count:state.count+1
            }
        }else{
            return state
        }
    }
    const addCount = ()=>{
        // dispatch
        dispatch(
            {
                type:'add'
            }
        )
    }
    // 第一项是当前的状态值 第二项是发送action的dispatch函数
    const [state,dispatch] = useReducer(reducer,{count:0})
    return (
        <div>
            <p>{state.count}</p>
            <button onClick={addCount}>增加</button>
        </div>
    )
}

export default UseReducer


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107649649