ContextとuseStateを使用してReactJsでRESTAPI状態をグローバルに処理する

React Jsは、ContextおよびuseStateフックチュートリアルを使用して、RESTAPIデータをグローバルに処理します。この包括的なチュートリアルでは、REST APIデータを親コンポーネントから子コンポーネントに送信する方法、またはコンテキストフックとuseStateフックを使用してReactjsアプリケーションのディープコンポーネントツリーで送信する方法に関するシンプルで簡単なテクニックを学習します。

さらに、Axiosライブラリをインストールして使用し、サーバーからデータ応答をフェッチするHTTPGetリクエストを作成する方法も示します。

コンテキストプロバイダーを作成し、コンテキストプロバイダーに値またはデータを設定して、親コンポーネントまたは上位コンポーネントから子コンポーネントに値を渡します。

グローバル状態は、大規模なWebアプリケーションに影響を与えることを目的としています。繰り返され、さまざまな状況で必要になる可能性のある状態を管理することはめったにありません。コードを繰り返し記述することは最善のポリシーとは見なされず、メモリと時間の両方を消費します。

ContextとuseStateフックを使用してReactJsでRESTAPI状態をグローバルに処理する方法

ステップ1： Reactアプリをインストールする
ステップ2：ブートストラップとAxiosモジュールをインストールする
ステップ3：コンテキストファイルを作成する
ステップ4：コンテキストプロバイダーを構築する
ステップ5：親コンポーネントにプロバイダーを追加する
ステップ6：子コンポーネントのグローバル状態にアクセスする
ステップ7： Reactアプリケーションを開始する

Reactアプリをインストールする

最初のステップは、指定されたコマンドを使用して新しいReactアプリケーションをインストールすることです。

npx create-react-app react-global-state-rest-api

次に、プロジェクトフォルダに入ります。

cd react-global-state-rest-api

Bootstrap＆Axiosモジュールをインストールします

次のコマンドを使用して、AxiosモジュールとBootstrapモジュールをすべてインストールします。

指定されたコマンドを実行して、パッケージをインストールできます。

npm install axios bootstrap

コンテキストファイルの作成

contexts /ディレクトリを作成します。ここで、新しいファイルを作成し、ApiContext.jsという名前を付けてから、指定されたコードをそのファイルに挿入する必要があります。

import { createContext } from 'react'
export const ApiContext = createContext([])

コンテキストプロバイダーの構築

contextsフォルダー内に、Store.jsという名前を付けて、指定されたコードを挿入する必要がある新しいファイルを再度作成します。

import React, { useState, useEffect } from 'react'
import { ApiContext } from '../contexts/ApiContext'
import axios from 'axios'
function Store({ children }) {
  const [users, setUsers] = useState([])
  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((res) => {
        setUsers(res.data)
      })
      .catch((error) => {
        console.log(error)
      })
  }, [])
  return (
    <ApiContext.Provider value={[users, setUsers]}>
      {children}
    </ApiContext.Provider>
  )
}
export default Store

ApiContextをインポートしました。これを使用して、RESTAPIとuseStateを使用しApiContext.Providerて取得したデータをどこに渡す必要があるかを定義します。

親コンポーネントにプロバイダーを追加

データをグローバルまたは子コンポーネントで共有するには、最初にApiContextを使用して作成したストアをインポートします。

この方法でStoreを親コンポーネントにします。このプロバイダーで定義されたすべてのコンポーネントは、グローバルRESTAPIデータを取得できます。

App.jsファイルを開き、ファイルに以下を挿入します。

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import Users from './components/Users'
import Store from './contexts/Store'
function App() {
  return (
    <div className="container mt-5">
      <Store>
        <Users />
      </Store>
    </div>
  )
}
export default App

子コンポーネントのグローバル状態にアクセスする

コンポーネントディレクトリを作成してから、Users.jsファイルを作成し、指定されたコードをファイルに貼り付けてください。

import React, { useContext, useEffect, useState } from 'react'
import { ApiContext } from '../contexts/ApiContext'
function Users() {
  const [users, setUsers] = useContext(ApiContext)
  useEffect(() => {
    console.log(users)
  }, [users])
  return ( 
    <div>
      <h2 className="mb-4">
        React Handle REST API Global State with Context Hook Example
      </h2>
      {users.map((res, idx) => {
        return (
          <div className="card mb-2" key={idx}>
            <div className="card-body">
              <h5 className="card-title">{res.name}</h5>
              <h6 className="card-subtitle mb-2 text-muted">{res.username}</h6>
              <p className="card-text">{res.company.catchPhrase}</p>
              <a href="#" className="card-link">
                {res.website}
              </a>
            </div>
          </div>
        )
      })}
    </div>
  )
}
export default Users

反応ライブラリからuseContextフックをインポートし、コンテキストディレクトリからApiContextをインポートします。コンテキストプロバイダーで定義したuseContextdestructuringpropの値を使用します。

useEffectフックは、副作用を実行するために使用されています。ご覧のとおり、この値に変更が発生するとすぐに、Usersコンポーネントで更新されるため、配列シンボルでuserspropを渡しました。

グローバルに設定したBootstrapを使用してreactHTMLでRESTAPIデータを表示しています。

Reactアプリケーションを開始します

最終的には、アプリケーションを実行するための推奨コマンドを実行する準備が整います。

npm start

指定されたURLを使用して、ブラウザーでアプリを表示できます。

http://localhost:3000

コンテキストAPIチュートリアルを使用してRESTAPI状態をグローバルに管理する

結論

このガイドでは、ReactコンポーネントでRESTAPIグローバル状態を共有する方法を学びました。さらに、Reactコンポーネントでグローバル状態にアクセスする方法についても説明しました。

そのために、子コンポーネントでグローバル状態を取得し、forループとBootstrap5を使用してAPI応答またはデータをReactのHTMLリストビューに表示します。

ソース：https ：//www.positronx.io/react-manage-rest-api-state-globally-with-context-api-tutorial/

#react #api

ContextとuseStateフックを使用してReactJsでRESTAPI状態をグローバルに処理する方法

ステップ1： Reactアプリをインストールする
ステップ2：ブートストラップとAxiosモジュールをインストールする
ステップ3：コンテキストファイルを作成する
ステップ4：コンテキストプロバイダーを構築する
ステップ5：親コンポーネントにプロバイダーを追加する
ステップ6：子コンポーネントのグローバル状態にアクセスする
ステップ7： Reactアプリケーションを開始する

Reactアプリをインストールする

最初のステップは、指定されたコマンドを使用して新しいReactアプリケーションをインストールすることです。

npx create-react-app react-global-state-rest-api

次に、プロジェクトフォルダに入ります。

cd react-global-state-rest-api

Bootstrap＆Axiosモジュールをインストールします

次のコマンドを使用して、AxiosモジュールとBootstrapモジュールをすべてインストールします。

指定されたコマンドを実行して、パッケージをインストールできます。

npm install axios bootstrap

コンテキストファイルの作成

import { createContext } from 'react'
export const ApiContext = createContext([])

コンテキストプロバイダーの構築

contextsフォルダー内に、Store.jsという名前を付けて、指定されたコードを挿入する必要がある新しいファイルを再度作成します。

import React, { useState, useEffect } from 'react'
import { ApiContext } from '../contexts/ApiContext'
import axios from 'axios'
function Store({ children }) {
  const [users, setUsers] = useState([])
  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((res) => {
        setUsers(res.data)
      })
      .catch((error) => {
        console.log(error)
      })
  }, [])
  return (
    <ApiContext.Provider value={[users, setUsers]}>
      {children}
    </ApiContext.Provider>
  )
}
export default Store

ApiContextをインポートしました。これを使用して、RESTAPIとuseStateを使用しApiContext.Providerて取得したデータをどこに渡す必要があるかを定義します。

親コンポーネントにプロバイダーを追加

データをグローバルまたは子コンポーネントで共有するには、最初にApiContextを使用して作成したストアをインポートします。

この方法でStoreを親コンポーネントにします。このプロバイダーで定義されたすべてのコンポーネントは、グローバルRESTAPIデータを取得できます。

App.jsファイルを開き、ファイルに以下を挿入します。

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import Users from './components/Users'
import Store from './contexts/Store'
function App() {
  return (
    <div className="container mt-5">
      <Store>
        <Users />
      </Store>
    </div>
  )
}
export default App

子コンポーネントのグローバル状態にアクセスする

コンポーネントディレクトリを作成してから、Users.jsファイルを作成し、指定されたコードをファイルに貼り付けてください。

import React, { useContext, useEffect, useState } from 'react'
import { ApiContext } from '../contexts/ApiContext'
function Users() {
  const [users, setUsers] = useContext(ApiContext)
  useEffect(() => {
    console.log(users)
  }, [users])
  return ( 
    <div>
      <h2 className="mb-4">
        React Handle REST API Global State with Context Hook Example
      </h2>
      {users.map((res, idx) => {
        return (
          <div className="card mb-2" key={idx}>
            <div className="card-body">
              <h5 className="card-title">{res.name}</h5>
              <h6 className="card-subtitle mb-2 text-muted">{res.username}</h6>
              <p className="card-text">{res.company.catchPhrase}</p>
              <a href="#" className="card-link">
                {res.website}
              </a>
            </div>
          </div>
        )
      })}
    </div>
  )
}
export default Users

グローバルに設定したBootstrapを使用してreactHTMLでRESTAPIデータを表示しています。

Reactアプリケーションを開始します

最終的には、アプリケーションを実行するための推奨コマンドを実行する準備が整います。

npm start

指定されたURLを使用して、ブラウザーでアプリを表示できます。

http://localhost:3000

コンテキストAPIチュートリアルを使用してRESTAPI状態をグローバルに管理する

結論

ソース：https ：//www.positronx.io/react-manage-rest-api-state-globally-with-context-api-tutorial/

#react #api

ContextとuseStateを使用してReactJsでRESTAPI状態をグローバルに処理する

ContextとuseStateフックを使用してReactJsでRESTAPI状態をグローバルに処理する方法

Reactアプリをインストールする

Bootstrap＆Axiosモジュールをインストールします

コンテキストファイルの作成

コンテキストプロバイダーの構築

親コンポーネントにプロバイダーを追加

子コンポーネントのグローバル状態にアクセスする

Reactアプリケーションを開始します

結論

What is GEEK

Buddha Community