阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
小編精選 - 技術文章翻譯  ·  04月08日

使用 useReducer 和 Typescript 回應上下文。

使用 useReducer 和 Typescript 回應上下文。

標題：使用 useReducer 和 Typescript 反應上下文。

發表：真實

說明：將 React Context API 與強類型化的縮減器和操作一起使用。

標籤： typescript、react、上下文、reducers

只是程式碼嗎？

React 應用程式中有很多處理狀態的選項。顯然你可以使用setState來處理一些小的邏輯，但是如果你有一個複雜的狀態需要管理怎麼辦？

也許您會使用 Redux 或 MobX 來處理這種情況，但也可以選擇使用 React Context，並且您不必安裝其他依賴項。

讓我們看看如何使用 Context API 和 Typescript 來管理複雜的狀態。

在本教程中，我們將建立一個帶有購物車計數器的產品清單。

首先，使用create-react-app建立一個新的 React 專案。

npx create-react-app my-app --template typescript
cd my-app/

接下來，在src目錄中建立一個新的context.tsx檔案。

/*context.tsx*/

import React, { createContext } from 'react';

const AppContext = createContext({});

您可以使用任何您想要的值來初始化上下文 api，就這麼簡單，在本例中，我使用的是一個空物件。

現在讓我們建立一個初始狀態，其中產品清單為零，購物車計數器為零。另外，讓我們為此加入一些類型。

/*context.tsx*/

import React, { createContext } from 'react';

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type InitialStateType = {
  products: ProductType[];
  shoppingCart: number;
}

const initialState = {
  products: [],
  shoppingCart: 0,
}

const AppContext = createContext<InitialStateType>(initialState);

產品清單中的每個產品都有一個 ID、名稱和價格。

現在我們將使用減速器和操作來建立和刪除產品，並將購物車計數器加一。首先，建立一個名為reducers.ts的新檔案。

/*reducers.ts*/

export const productReducer = (state, action) => {
  switch (action.type) {
    case 'CREATE_PRODUCT':
      return [
        ...state,
        {
          id: action.payload.id,
          name: action.payload.name,
          price: action.payload.price,
        }
      ]
    case 'DELETE_PRODUCT':
      return [
        ...state.filter(product => product.id !== action.payload.id),
      ]
    default:
      return state;
  }
}

export const shoppingCartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_PRODUCT':
      return state + 1;
  }
}

一個reducer函數接收兩個參數，第一個是狀態，我們在使用useReducer鉤子時傳遞，第二個是一個物件，表示事件和一些將改變狀態（動作）的資料。

在本例中，我們建立兩個減速器，一個用於產品，另一個用於購物車。在產品縮減器上，我們新增了兩個操作，一個用於建立新產品，另一個用於刪除任何產品。對於購物車減速器，我們加入的唯一操作是每次加入新產品時增加計數器。

正如您所看到的，為了建立產品，我們傳遞 id、名稱和價格，並使用新物件返回當前狀態。要刪除一個，我們只需要 id ，返回的是狀態，但沒有具有該 id 的產品。

現在讓我們更改上下文文件以導入這些減速器函數。

/*context.tsx*/

import React, { createContext, useReducer } from 'react';
import { productReducer, shoppingCartReducer } from './reducers';

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type InitialStateType = {
  products: ProductType[];
  shoppingCart: number;
}

const intialState = {
  products: [],
  shoppingCart: 0,
}

const AppContext = createContext<{
  state: InitialStateType;
  dispatch: React.Dispatch<any>;
}>({
  state: initialState,
  dispatch: () => null
});

const mainReducer = ({ products, shoppingCart }, action) => ({
  products: productReducer(products, action),
  shoppingCart: shoppingCartReducer(shoppingCart, action),
});

const AppProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  return (
    <AppContext.Provider value={{state, dispatch}}>
      {children}
    </AppContext.Provider>
  )
}

export { AppContext, AppProvider };

有一個mainReducer函數，它結合了我們將擁有的兩個減速器（產品減速器和購物車減速器），每個減速器管理狀態的選定部分。

此外，我們建立了AppProvider元件，在其中， useReducer鉤子採用mainReducer和初始狀態來傳回state和dispatch 。

我們將這些值傳遞到AppContext.Provider中，這樣做我們可以使用useContext鉤子存取state和dispatch 。

接下來，為減速器和操作加入這些類型。

/*reducers.ts*/

type ActionMap<M extends { [index: string]: any }> = {
  [Key in keyof M]: M[Key] extends undefined
    ? {
        type: Key;
      }
    : {
        type: Key;
        payload: M[Key];
      }
};

export enum Types {
  Create = 'CREATE_PRODUCT',
  Delete = 'DELETE_PRODUCT',
  Add = 'ADD_PRODUCT',
}

// Product

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type ProductPayload = {
  [Types.Create] : {
    id: number;
    name: string;
    price: number;
  };
  [Types.Delete]: {
    id: number;
  }
}

export type ProductActions = ActionMap<ProductPayload>[keyof ActionMap<ProductPayload>];

export const productReducer = (state: ProductType[], action: ProductActions | ShoppingCartActions) => {
  switch (action.type) {
    case Types.Create:
      return [
        ...state,
        {
          id: action.payload.id,
          name: action.payload.name,
          price: action.payload.price,
        }
      ]
    case Types.Delete:
      return [
        ...state.filter(product => product.id !== action.payload.id),
      ]
    default:
      return state;
  }
}

// ShoppingCart

type ShoppingCartPayload = {
  [Types.Add]: undefined;
}

export type ShoppingCartActions = ActionMap<ShoppingCartPayload>[keyof ActionMap<ShoppingCartPayload>];

export const shoppingCartReducer = (state: number, action: ProductActions | ShoppingCartActions) => {
  switch (action.type) {
    case Types.Add:
      return state + 1;
    default:
      return state;
  }
}

我從這篇文章中採用了這種方法，基本上我們正在檢查使用了哪個action.type ，並根據該方法，我們產生有效負載的類型。

筆記

您可以採取的另一種方法是使用像這樣的Discriminated unions 。

type Action =
 | { type: 'ADD' }
 | { type: 'CREATE', create: object }
 | { type: 'DELETE', id: string };

在前面的程式碼中，所有這些類型都有一個稱為 type 的公共屬性。 Typescript 將為可區分的聯合建立類型保護，並讓我們現在根據我們正在使用的類型以及物件類型具有的其他屬性。

但在本教程中，我們為操作type和payload使用兩個常見屬性，並且payload物件類型會根據type而變化，因此可區分的聯合類型將無法運作。

現在，讓我們將定義的類型匯入到context文件中。

/*context.tsx*/

import React, { createContext, useReducer, Dispatch } from 'react';
import { productReducer, shoppingCartReducer, ProductActions, ShoppingCartActions } from './reducers';

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type InitialStateType = {
  products: ProductType[];
  shoppingCart: number;
}

const initialState = {
  products: [],
  shoppingCart: 0,
}

const AppContext = createContext<{
  state: InitialStateType;
  dispatch: Dispatch<ProductActions | ShoppingCartActions>;
}>({
  state: initialState,
  dispatch: () => null
});

const mainReducer = ({ products, shoppingCart }: InitialStateType, action: ProductActions | ShoppingCartActions) => ({
  products: productReducer(products, action),
  shoppingCart: shoppingCartReducer(shoppingCart, action),
});

const AppProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  return (
    <AppContext.Provider value={{state, dispatch}}>
      {children}
    </AppContext.Provider>
  )
}

export { AppProvider, AppContext };

不要忘記用AppProvider包裝您的主要元件。

/* App.tsx */

import React from 'react';
import { AppProvider } from './context';
import Products from './products';

const App = () => {
  <AppProvider>
    // your stuff
    <Products />
  </AppProvider>
}

export default App

建立一個Products元件並在其中加入以下程式碼。

/* Products.tsx */

import React, { useContext } from 'react';
import { AppContext } from './context';
import { Types } from './reducers';

const Products = () => {
  const { state, dispatch } = useContex(AppContext);

  return (
    <div>
      <button onClick={() => {
        dispatch({
          type: Types.Add,
        })
      }}>
        click
        </button>
      {state.shoppingCart}
    </div>
  )
}

export default Products;

現在一切都是強類型的。

您可以在此處查看程式碼。

來源。

https://medium.com/hackernoon/finally-the-typescript-redux-hooks-events-blog-you-were-looking-for-c4663d823b01

原文出處：https://dev.to/elisealcala/react-context-with-usereducer-and-typescript-4obm

0個讚   0留言 147瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
熱門文章
🔥 CSS 小挑戰：如何用 div 填滿頁面？
🔥 我在寫程式碼時，會切換的兩種風格：嚴格風 vs 隨興風
🔥 使用 Tailwind CSS 和 Flowbite 建立的開源 WYSIWYG 文字編輯器元件
🔥 我決定認真做好作品集，2024當前端工程師
🔥 經營個人頻道，改變了我的軟體工程師生涯
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 效率 ar 第一 vs 工作 ui 開發 主題 JavaScript javascript 測試 框架 學習 網站 AI 研究 課程 COM 作為 資料庫 with html fetch 專案 Ml 後端 今天 go 開源 %' console 作業 Github 清單 技術 公司 分享 搜尋 套件 系列 FB 前端 ul Javascript REACT 查詢 git JS 權限 網頁 CD 結構 Git js bi 成員 Can app ＣＳＳ AWS ROS 乾淨 論壇 jav 聊天 JAVA 指標 typescript api Line Ｅ.Ｖ 練習 語言 Ai css vscode 全端 Python 架構 表格 編輯 入門 MySQL GIT 演算法 github 部署 遊戲 linux 非同步 this for 審查 Java npm 自學網頁 新手 謝謝 登入
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。