TIL.useContextとuseReducerの使用

5973 ワード
useContext useReducer TIL テキストリンク
useContextとは?
useContextでは、必要なpropsをグローバルに使用できます.
親から子、そしてその子からもう一人の子まで、2-3の成績でボーナスをもらうとしたら?
useContextの方が効果的です.
const value =useContext(MyContext);
コンテキストオブジェクト(react.createContextから返された値)を受信し、そのコンテキストの現在の値を返します.
contextの現在の値は、ツリーでこのHookを呼び出すコンポーネントに最も近いのvaluepropで決定します.
ユーザーReducer、ユーザーContextとともに使用
useReducerは、ステータスを管理する際に使用されるhookであり、特にuseContextのように使用される場合である.以下にショッピングバスケットを作成する際にUserDeducerとUserContextを使用して作成したコードを示します.
import React, {createContext,useContext,useReducer} from 'react';
import cartReducer, {
  SORT_BY_DATE,
} from './CartReducer';

const UsercartContext =createContext<CartContext|null>(null);

export const useUserCart=():CartContext =>{
  const usercartContext = useContext(UsercartContext);
  
  ==>UserCartProvider를 생성해준다. 대부분 props로는 children을 받지만 필요에 따라
  얼마든지 추가 가능하다.
  export const UserCartProvider =({children}:{children:React.ReactNode;})=>{
    
    const [state,dispatch]=useReducer(cartReducer,initialState);
    
    const sortByDate=(payload:any) =>{
      dispatch({type:SORT_BY_DATE,payload});
 
      return(
        <UsercartContext.Provider
          value= {{
            sortByDate,dispatch}}
       >
         {children}
       </UsercartContext.Provider>
  )
}
注意:https://ko-de-dev-green.tistory.com/68
DENU (端末/JSON/SVG用)にGITHUBの貢献を得るAPIを作りました.
いろいろな関数