React는 useReducer TypeScript로 컨텍스트 생성

이 튜토리얼에서는 useReudcer 후크를 사용하여 상태 관리를 위한 React Context API를 탐색할 것입니다. 타사 라이브러리나 일부 항목을 설치할 필요가 없습니다. 이것이 핵심 기능입니다. 그럼 바로 시작하겠습니다!

먼저 src/와 같이 state라는 폴더를 src/state 아래에 만듭니다. 그런 다음 StateProvider.tsx 및 reducer.ts 두 개의 파일이 필요합니다.



이제 StateProvider.tsx 파일 안에 아래 코드를 작성하십시오.

import React, { createContext, useContext, useReducer } from "react";
import { reducer, initialState, State } from "./reducer";

const AppContext = createContext<any>(null);

interface Props {
  children: JSX.Element | JSX.Element[];
}

export const StateProvider: React.FC<Props> = ({ children }) => (
  <AppContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </AppContext.Provider>
);

export const useStateValue = () => useContext(AppContext);

컨텍스트 API를 가져오고 하위 구성 요소를 래핑합니다.

Reudcer.ts

export const actionTypes = {
  INCREMENT: "INCREMENT",
};

export interface State {
  count: number;
}

export const initialState: State = {
  count: 0,
};

export const reducer = (state = initialState, action: any) => {
  switch (action.Type) {
    case actionTypes.INCREMENT:
      return {
        ...state,
        count: state.count + action.count,
      };
    default:
      return state;
  }
};

감속기 기능을 생성하고 조건부로 Type을 확인합니다.

마무리

전역적으로 상태에 액세스할 수 있도록 <App /> 구성 요소를 래핑해야 합니다.
/src/index.tsx

  <React.StrictMode>
    <StateProvider>
      <App />
    </StateProvider>
  </React.StrictMode>,

액세스 및 파견

이제 상태에 액세스하고 useStateValue 함수를 후크로 사용하여 쉽게 전달할 수 있습니다.

import React from "react";
import { useStateValue } from "./state/StateProvider";
import { actionTypes } from "./state/reducer";
import "./App.css";

function App() {
  const [state, dispatch] = useStateValue();
  console.log(state);

  const incrementHandler = () => {
    dispatch({
      Type: actionTypes.INCREMENT,
      count: 1,
    });
  };

  return (
    <div className="App">
      <button onClick={incrementHandler}>Add +</button>
      <h2>{state.count}</h2>
    </div>
  );
}

export default App;

`

자식 저장소: https://github.com/lifeeric/react-context-with-useReducer/tree/master

감사합니다

이 게시물이 도움이 된다면 친구, 가족, 동료 및 직장 동료와 공유하십시오.

저는 현재 일자리를 찾고 있습니다. 저에게 기회가 있다면 저를 고려해주세요.
https://ericgit.me