React NativeでRealmとReduxを駆使してローカルストレージとグローバルステートを管理

2024-06-29

React NativeアプリでRealmとReduxを併用する

このチュートリアルでは、React NativeアプリでローカルストレージとしてRealmと、グローバルステート管理としてReduxを併用する方法を説明します。

前提知識

このチュートリアルを理解するには、以下の知識が必要です。

React Native
Redux
Realm

準備

以下のコマンドを実行して、必要なライブラリをインストールします。

yarn add realm
react-native link realm
yarn add react-redux
react-native link react-redux
yarn add redux
react-native link redux
yarn add redux-immutable-state-invariant
react-native link redux-immutable-state-invariant
yarn add remote-redux-devtools
react-native link remote-redux-devtools

モデルの定義

まず、Realmで管理するデータモデルを定義します。例えば、以下はタスク管理アプリのタスクモデルです。

class Item {
  static schema: UserSchema = {
    name: 'Item',
    primaryKey: 'id',
    properties: {
      id: { type: 'string', default: '' },
      title: { type: 'string' },
      completed: { type: 'bool', default: false },
    },
  };
}

次に、Reduxストアとアクション、reducerを作成します。

// actions.js
export const SET_ITEMS = 'SET_ITEMS';
export const setItems = (items) => ({ type: SET_ITEMS, items });

// reducer.js
import { SET_ITEMS } from '../actions/items';

const INITIAL_STATE = {
  items: [],
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SET_ITEMS:
      return { ...state, items: action.items };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

Realmを使用して、データの読み書きを行います。

// Realmの初期化
const realm = await Realm.open();

// データの読み込み
const items = realm.objects('Item');

// データの作成
realm.write(() => {
  realm.create('Item', {
    id: '1',
    title: 'タスク1',
    completed: false,
  });
});

// データの更新
realm.write(() => {
  const item = realm.objects('Item').find((item) => item.id === '1');
  item.completed = true;
});

// データの削除
realm.write(() => {
  realm.delete(realm.objects('Item').find((item) => item.id === '1'));
});

Realmでデータに変更があった場合、Reduxストアを更新して、UIに反映します。

// Realmの変更を監視
realm.addChangeListener((changes) => {
  store.dispatch(setItems(realm.objects('Item')));
});

コンポーネントの接続

ReactコンポーネントからReduxストアにアクセスするには、connect()関数を使用します。

import React from 'react';
import { connect } from 'react-redux';

const ItemsList = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.title}</li>
    ))}
  </ul>
);

const mapStateToProps = (state) => ({
  items: state.items,
});

export default connect(mapStateToProps)(ItemsList);

このチュートリアルでは、React NativeアプリでRealmとReduxを併用する方法を説明しました。Realmを使用してローカルストレージにデータを保存し、Reduxを使用してグローバルステートを管理することで、効率的かつ柔軟なアプリ開発が可能になります。

補足

RealmとReduxは、それぞれ異なる目的に使用されます。Realmはローカルストレージ用、Reduxはグローバルステート管理用です。
RealmとReduxを併用する場合は、データの一貫性を保つために注意が必要です。
より複雑なアプリケーションの場合、RealmとReduxに加えて、他のライブラリも必要になる場合があります。

React NativeアプリでRealmとReduxを併用するサンプルコード

ファイル構成

├── actions
│   └── items.js
├── components
│   └── ItemsList.js
├── reducer.js
├── store.js
└── App.js

コード

actions.js

export const SET_ITEMS = 'SET_ITEMS';

export const setItems = (items) => ({
  type: SET_ITEMS,
  items,
});

reducer.js

import { SET_ITEMS } from './actions/items';

const INITIAL_STATE = {
  items: [],
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SET_ITEMS:
      return { ...state, items: action.items };
    default:
      return state;
  }
};

store.js

import { createStore } from 'redux';
import reducer from './reducer';
import { Realm } from 'realm';

const realm = await Realm.open();

const store = createStore(reducer);

realm.addChangeListener((changes) => {
  store.dispatch(setItems(realm.objects('Item')));
});

export default store;

App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ItemsList from './components/ItemsList';

const App = () => (
  <Provider store={store}>
    <ItemsList />
  </Provider>
);

export default App;

ItemsList.js

import React from 'react';
import { connect } from 'react-redux';

const ItemsList = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.title}</li>
    ))}
  </ul>
);

const mapStateToProps = (state) => ({
  items: state.items,
});

export default connect(mapStateToProps)(ItemsList);

実行方法

上記のコードをプロジェクトにコピーします。
yarn add realm コマンドを実行して、Realmライブラリをインストールします。
yarn start コマンドを実行して、アプリを起動します。

使い方

アプリが起動したら、以下の操作を実行できます。

Realmを使用してデータを追加、編集、削除します。
データが変更されると、UIが自動的に更新されます。

このサンプルコードは、基本的な操作のみを示しています。
より複雑なアプリケーションの場合、モデル、アクション、reducerを拡張する必要があります。
RealmとReduxの公式ドキュメントを参照して、詳細な情報を確認してください。

React NativeでRealmとReduxを併用するその他の方法

Redux Persistは、Reduxストアの状態を永続化するためのライブラリです。RealmをRedux Persistのストレージエンジンとして使用することで、Reduxストアの状態をRealmに保存することができます。

import { persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistor = persistStore(store, { storage });

Normalizrは、APIレスポンスやRealmデータなどのデータを正規化するためのライブラリです。Normalizrを使用してデータを正規化することで、Reduxストアでデータを効率的に管理することができます。

import { normalize } from 'normalizr';

const normalizedData = normalize(realm.objects('Item'), userSchema);

store.dispatch(setItems(normalizedData.entities.item));

Sagasを使用する

Sagasは、非同期処理を管理するためのライブラリです。Sagasを使用して、Realmからのデータの読み書きや、APIとの通信などの非同期処理を管理することができます。

import { takeEvery, put } from 'redux-saga/effects';
import { SET_ITEMS } from './actions/items';
import { Realm } from 'realm';

function* fetchItems() {
  const realm = await Realm.open();
  const items = realm.objects('Item');
  yield put(setItems(items));
}

export function* watchFetchItems() {
  yield takeEvery(SET_ITEMS, fetchItems);
}

カスタムフックを使用する

React Hooksを使用して、Realmからのデータの読み書きや、Reduxストアとの連携をカスタムフックでカプセル化することができます。

import React, { useState, useEffect } from 'react';
import { useStore } from 'react-redux';
import { Realm } from 'realm';

const useItems = () => {
  const [items, setItems] = useState([]);
  const store = useStore();

  useEffect(() => {
    const realm = await Realm.open();
    realm.addChangeListener((changes) => {
      setItems(realm.objects('Item'));
    });
  }, []);

  return items;
};