react中如何使用useReducer?

2021-10-04 21:32:21 阅读：198 来源： 互联网

标签：reducer useReducer dispatch react 如何 state num store

react中如何使用useReducer？


import React,{useReducer} from 'react';

// redux必须的内容
// store reducer

/* 
    useReducer使用？
    1.创建 数据仓库store 和 管理者reducer
    2.通过useReducer(reducer,store)来state和dispatch
*/
const store = {
    num:10
}

const reducer=(state,action) =>{
    switch (action.type) {
        case 'changeNum':

            return {
                ...state,
                num:action.num
            }
            
        default:
            return {
                ...state
            };
    }

}

export function Reducer(){

   const [state,dispatch] =  useReducer(reducer,store);

    return(
        <div onClick={()=> dispatch({
            type:'changeNum',
            num:100
        })}>
            这是一个函数式组件---{state.num}
        </div>
    )
}

标签：reducer,useReducer,dispatch,react,如何,state,num,store
来源： https://www.cnblogs.com/malong1992/p/15367246.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react中如何使用useReducer?