どのようにセットアップreduxツールキットとRTKクエリ

このガイドでは、私はどのようにReduxツールキットとRTKのクエリを設定する方法を示します.
ここでは全文を参照してください.https://codevoweb.com/setup-redux-toolkit-and-rtk-query
RTKクエリをReduxツールキットに追加することは必須ではありませんが、両方の反応プロジェクトでそれらを結合すると、それはReduxツールキットの真の力を引き出します.

技術スタック

反応する

タイプスクリプト

Reduxツールキット

反応する

RTKクエリ

必要条件

ES 6構文と特徴で快適な

反応コア概念に精通しているJSX , Props , State , Functional Components

快適なRedux and its terminologies

このチュートリアルガイドを読む方法

このチュートリアルではReduxツールキットとRTKクエリをReplyで設定する方法に焦点を当てます.私はすでにReduxの良い理解を持っていると仮定し、どのように反応アプリでそれを状態を管理します.
reduxがどのように動作するかの詳細な説明については、どのようにreduxツールキットを使用してデモをチェックアウトRedux overview tutorial .
例は典型的に基づいていますCreate React App すべてのコードがsrcフォルダにあるプロジェクト.また、私はいくつかのベストプラクティスを使用してReduxツールキットを使用して反応を提供します.

Reduxのツールキットを追加するには

反応とreduxを使用して新しいアプリケーションを初期化するための推奨された方法はRedux+JS template うんRedux+TS template .
Reduxを使用して反応アプリを作成するこの方法は、より迅速であり、また、間違いを犯すのを防ぎます.

# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

Reduxツールキットを古い反応プロジェクトに加えてください

このメソッドはReduxツールキットを古い反応プロジェクトに追加したい人のためです.
また、どのようにRDUXツールキットとRTKの質問をゼロから反応するように設定する方法を学びたい場合は、INDUCEとDUDXツールキットのアウトを理解することができますし、ステップバイステップの手順に従ってください.
あなたがReduxで新しい反応プロジェクトを始めているならば、私はそれが速くて簡単にセットアップしているので反応するReduxツールキットを加えるために推薦された方法に従うことを勧めます.
このチュートリアルのために私のパッケージマネージャとして糸を使うつもりです.あなたが使用するパッケージマネージャは、我々が書くコードに影響しません.

新しい反応アプリを初期化

必要な依存関係をフェッチしてインストールする前に、最初に新しい反応アプリを初期化しましょう.
TypeScriptで新しい反応アプリを作成するには、このコマンドを実行します.

# NPM
npx create-react-app redux-app --template typescript
# Yarn
yarn create react-app redux-app --template typescript

プロジェクトの初期化プロセスは、あなたのインターネットの速度に応じて数分かかりますので、後ろに座ると、いくつかのコーヒーを取得しながら、アプリはバックグラウンドでその仕事を行う反応を作成します.

RedUxツールキットをインストールしてください

RedUxツールキットを取得し、インストールし、プロジェクトにreduxを反応させる.

# NPM
npm install @reduxjs/toolkit react-redux
# Yarn
yarn add @reduxjs/toolkit react-redux

Reduxツールキットはすでにタイプスクリプトで書かれているので、その型定義ファイルを個別にインストールすることを心配する必要はありません.
Reduxは依存性を持っている@types/react-redux したがって、パッケージの型定義ファイルが自動的にインストールされます.

Reduxストアを作る

srcフォルダ内で、reduxフォルダを作成し、このreduxフォルダ内でstore.ts ファイル.
今、あなたのフォルダ構造はいくぶんこのように見えなければなりません.

redux-app/
├── node_modules/
├── public/
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src/
│ ├── redux/
│ │ └── store.ts
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

Reduxツールキットのストアを作成するにはconfigureStore 以上の標準抽象化APIですcreateStore しかし、より良い開発経験のためにいくつかの良いデフォルト構成を加えます.
ConfigureStore関数は、次のプロパティを持つ単一の構成オブジェクトを受け入れます.

減速機

devtools

ミドルウェア

エンハンサー

プレロアステッド

我々は、ストアを構成する3つの重要なプロパティ(還元剤、devtoolsとミドルウェア)に焦点を当てるつもりです.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {}
})

我々は、提供する必要はありませんconfigureStore を追加します.

ルート状態とディスパッチタイプを定義する

我々は、ストアからルートステートとAppDispatchを抽出し、それらから直接エクスポートする必要がありますstore.ts ファイル.
RootStateとAppDispatchをストア自体から推論することは、より多くのステートスライス、APIサービスを追加したり、ミドルウェアの設定を変更するときに正しく更新されることを意味します.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {}
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Reduxのストアを反応アプリに提供する

ストアが作成されているので、我々はアプリケーションのトップレベルからすべてのコンポーネントにそれを提供する必要があります.
にindex.tsx ファイルをインポート./redux/store と<Provider> 反応Reduxからの構成要素.
プロバイダーコンポーネントをラップし、プロバイダーにプロップとしてストアを渡します.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 👇 Import Provider from react-redux and store from ./redux/store
import { Provider } from 'react-redux';
import { store } from './redux/store';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    {/* 👇 Provide the store as prop */}
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

ここでは全文を参照してください.https://codevoweb.com/setup-redux-toolkit-and-rtk-query