はじめに

React Native のアプリ開発で状態管理に Redux を使用しています。
今回は、Redux の導入と基本的な使い方について備忘録としてまとめました。

Redux とは

Redux は、グローバルな状態管理のための JavaScript ライブラリです。
主に React と ReactNative の状態管理に使用されます。

React の状態管理方法としては他にも様々な選択肢がありますが、React に関する年次開発者調査を行っている Devographics の 2024 年調査によると、React の状態管理には useState に次いで Redux（Redux Toolkit）がよく使用されているという結果が出ています。
このことから、React アプリケーションでの状態管理には Redux が広く使われていることが分かります。

パッケージのインストール

Redux のパッケージには、コアな部分だけを含んだ Redux と、コアに加えて主要なツールをまとめた Redux Toolkit があります。
Redux を使用する際には、Redux Toolkit を利用することが推奨されています。

また、React や React Native では、状態の更新時にコンポーネントを再レンダリングするために hooks を使用する必要があります。
これをサポートするために、React Redux パッケージが提供されており、状態の管理とコンポーネント間のデータのやり取りを簡単にすることができます。

以下のコマンドを実行し、Redux Toolkit と React Redux をインストールします。

npm install @reduxjs/toolkit react-redux

Redux の基本的な使い方

Redux の基本的な使い方として、ActivityIndicator の表示・非表示と色の状態管理を例として実装します。

1. 状態を変更する関数を定義（createSlice 関数）

まず、createSlice 関数を使って初期の状態を定義し、状態を変更するアクションを実装します。

最初に、管理する状態の型を定義します。次に、createSlice を使って以下の要素を設定します

• name: スライスの名前を設定します。
• initialState: 状態の初期値を設定します。
• reducers: 状態を変更するためのアクションを定義します。

// src/store/reducers/loadingSlice.ts



import {createSlice, PayloadAction} from '@reduxjs/toolkit';



// LoadingState 型を定義

interface LoadingState {

  isLoading: boolean; // ローディング状態（表示/非表示）

  color: string;      // ローディングの色

}



// 初期状態を設定

const initialState: LoadingState = {

  isLoading: false, // 初期状態はローディング非表示

  color: '#00FF00', // 初期色は緑

};



const loadingSlice = createSlice({

  name: 'loading', // スライスの名前

  initialState,    // 初期状態

  reducers: {

    // ローディング表示

    showLoading: state => {

      state.isLoading = true;

    },

    // ローディング非表示

    hideLoading: state => {

      state.isLoading = false;

    },

    // ローディングの色を変更

    toggleLoadingColor: (state, action: PayloadAction<boolean>) => {

      // trueの場合は青色、falseの場合は緑色に変更

      state.color = action.payload ? '#0000FF' : '#00FF00';

    },

  },

});



export const {showLoading, hideLoading, toggleLoadingColor} =

  loadingSlice.actions;



export default loadingSlice.reducer;

2. store を作成

次に、configureStore 関数を使用して、アプリケーションの状態を管理するための store を作成します。

configureStore に先ほど作成した reducer を追加して作成します。
さらに、状態を取得するために RootState 型を定義します。

// src/store/index.ts



import {configureStore} from '@reduxjs/toolkit';



import loadingReducer from './reducers/loadingSlice';



// store の設定

export const store = configureStore({

  reducer: {

    // loading の状態を管理する reducer を追加

    loading: loadingReducer,

  },

});



// RootState 型を定義

export type RootState = ReturnType<typeof store.getState>;

3. ルートコンポーネントを Provider でラップ

次に、Provider を使ってアプリケーション全体で状態を取得・更新できるようにします。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/51810

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。