Redux は、JavaScript アプリケーション専用に設計された堅牢な状態管理ライブラリとして広く認識されており、よく人気のフレームワーク React と連携して使用されます。 Redux は、信頼できる状態コンテナを提供することで、アプリケーション状態の処理とトラブルシューティングのタスクを大幅に簡素化する強固な基盤を確立します。このガイドでは、Redux を構成する基本コンポーネントを深く掘り下げ、各要素の詳細な説明を提供し、それらがどのように相乗的に相互運用してアプリケーションの全体的な機能を効率化するかを示します。この詳細な調査の目的は、Redux の内部動作を解明し、開発者がこの状態管理ツールの複雑さを把握し、その機能をプロジェクトで効果的に活用できるようにすることです。

目次

1. Redux の概要
2. React アプリケーションでの Redux のセットアップ
3. アクションとアクションのタイプ
4. リデューサーとスライス
5. ストアの設定
6. React コンポーネントの接続
7. 結論と参考文献

1. Redux の概要

Redux は一方向データ フロー モデルに従い、次の 3 つの核となる原則に基づいています。

• 唯一の信頼できる情報源: アプリケーション全体の状態は、単一ストア内のオブジェクト ツリーに保存されます。この一元化により、アプリケーション全体のデバッグと変更の追跡が容易になります。
• 状態は読み取り専用です: 状態を変更する唯一の方法は、何が起こったかを説明するオブジェクトであるアクションを発行することです。これにより、状態の突然変異が予測可能かつ追跡可能になります。
• 変更は純粋な関数で行われます: アクションによって状態ツリーがどのように変換されるかを指定するには、純粋なリデューサーを作成します。純粋な関数は予測可能でテスト可能であるため、デバッグと単体テストが簡素化されます。

2. React アプリケーションでの Redux のセットアップ

まず、Redux と React-Redux をインストールします:

npm install redux react-redux @reduxjs/toolkit

このコマンドは、コア Redux ライブラリ、Redux 用の React バインディング、Redux ツールキットをインストールします。これにより、ストアのセットアップやスライスの作成などの多くの一般的なタスクが簡素化されます。

3. アクションとアクションの種類

アクションは、アプリケーションから Redux ストアにデータを送信する情報のペイロードです。アクション タイプは、アクションを表す定数です。

アクションタイプ.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

アクションとアクション タイプを定義すると、一貫性を維持し、アプリケーション内のエラーを減らすことができます。

4. レデューサーとスライス

Reducer は、ストアに送信されたアクションに応じてアプリケーションの状態がどのように変化するかを指定します。スライスは、アプリの 1 つの機能に対する Redux リデューサー ロジックとアクションのコレクションであり、Redux Toolkit の createSlice メソッドを使用して作成されます。

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

複数のスライスを結合するには:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. ストアの構成

ストアは、アクションとリデューサーを結び付けるオブジェクトです。アプリケーションの状態を保持し、getState() を介してアクセスを許可し、dispatch(action) を介して更新し、subscribe(listener) を介してリスナーを登録します。

ストア.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. React コンポーネントの接続

React コンポーネントを Redux ストアに接続するには、react-redux の Provider コンポーネントを使用してストアをコンポーネントに渡し、useSelector フックと useDispatch フックを使用して状態にアクセスして操作します。

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    
      

        
        

          Practice Redux with MusCo
        
        

          
          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. 結論と参考文献

Redux は、アプリケーションの状態を管理するための強力なライブラリです。アクション、リデューサー、ストア、およびすべてを React コンポーネントに接続する方法を理解することで、予測可能で保守可能なアプリケーションを作成できます。

キーポイント：

• アクション: アプリ内で何が起こるかを定義します。
• Reducers: アクションに応じて状態がどのように変化するかを指定します。
• Store: 状態を保持し、アクションを処理します。
• プロバイダ: ストアを React コンポーネントに渡します。

詳細については、公式 Redux ドキュメントを参照してください:

• Redux ドキュメント
• Redux ツールキットのドキュメント
• React-Redux ドキュメント

このガイドに従うことで、Redux をしっかりと理解し、独自のアプリケーションに実装できるようになります。