React Nativeでアプリを開発する際、「状態管理」 が重要になります。
しかし、状態管理の方法には Redux・Context API・Recoil などの選択肢があり、どれを使うべきか迷うことも…。
本記事では、それぞれの違いや使い方を分かりやすく解説 します！
1. 状態管理とは？なぜ必要？
React Nativeでは、コンポーネントごとにデータ（状態）を管理できます。
しかし、アプリが大きくなると…
✅ 「異なるコンポーネント間でデータを共有したい！」
✅ 「親コンポーネントから子コンポーネントへデータを渡すのが大変…」
といった問題が発生します。
そこで 状態管理ライブラリを使うと、効率的にデータを管理 できます！
2. Redux・Context API・Recoilの違い
| ライブラリ | 特徴・メリット | デメリット | 向いているケース |
|---|---|---|---|
| Redux | 状態の一元管理、予測しやすい | 設定がやや複雑 | 大規模アプリ、複数の画面でデータ共有 |
| Context API | 小規模アプリに最適、シンプル | パフォーマンス低下の可能性 | シンプルなデータ共有 |
| Recoil | シンプルでパフォーマンスも良い | まだ比較的新しい | 中規模〜大規模アプリ |
では、それぞれの使い方を見ていきましょう！
3. Reduxの使い方（大規模アプリ向け）
📌 Reduxのインストール
まず、必要なパッケージをインストールします。
npm install @reduxjs/toolkit react-redux
📌 Reduxの基本実装
① スライス（slice）を作成（状態とアクションを定義）
// redux/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
② ストアを作成
// redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});
③ アプリにReduxを適用
// App.js
import React from "react";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import Counter from "./Counter";
export default function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
④ コンポーネントでReduxを使う
// Counter.js
import React from "react";
import { View, Text, Button } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./redux/counterSlice";
const Counter = () => {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<View>
<Text>カウント: {count}</Text>
<Button title="増やす" onPress={() => dispatch(increment())} />
<Button title="減らす" onPress={() => dispatch(decrement())} />
</View>
);
};
export default Counter;
✅ Reduxのポイント
- 大規模アプリ 向け（状態の一元管理が可能）
- Redux Toolkitを使うと簡潔に書ける
- 設定が少し面倒 だが、管理しやすい
4. Context APIの使い方（シンプルなデータ共有向け）
Reduxを使うほどではない 小規模アプリ なら、Context API が便利！
📌 Context APIの実装
① Contextを作成
import React, { createContext, useState } from "react";
export const CountContext = createContext();
export const CountProvider = ({ children }) => {
const [count, setCount] = useState(0);
return (
<CountContext.Provider value={{ count, setCount }}>
{children}
</CountContext.Provider>
);
};
② アプリ全体に適用
// App.js
import React from "react";
import { CountProvider } from "./CountContext";
import Counter from "./Counter";
export default function App() {
return (
<CountProvider>
<Counter />
</CountProvider>
);
}
③ コンポーネントで使用
// Counter.js
import React, { useContext } from "react";
import { View, Text, Button } from "react-native";
import { CountContext } from "./CountContext";
const Counter = () => {
const { count, setCount } = useContext(CountContext);
return (
<View>
<Text>カウント: {count}</Text>
<Button title="増やす" onPress={() => setCount(count + 1)} />
<Button title="減らす" onPress={() => setCount(count - 1)} />
</View>
);
};
export default Counter;
✅ Context APIのポイント
- シンプルなデータ共有に最適
- Reduxほどの設定が不要
- データが多くなるとパフォーマンスが悪化 する可能性
5. Recoilの使い方（中規模〜大規模向け）
RecoilはReduxよりシンプルで、Context APIより高機能！
📌 Recoilのインストール
npm install recoil
📌 Recoilの基本実装
① Atomを作成（状態を定義）
// recoil/atom.js
import { atom } from "recoil";
export const countState = atom({
key: "countState",
default: 0,
});
② アプリ全体に適用
// App.js
import React from "react";
import { RecoilRoot } from "recoil";
import Counter from "./Counter";
export default function App() {
return (
<RecoilRoot>
<Counter />
</RecoilRoot>
);
}
③ コンポーネントで使用
// Counter.js
import React from "react";
import { View, Text, Button } from "react-native";
import { useRecoilState } from "recoil";
import { countState } from "./recoil/atom";
const Counter = () => {
const [count, setCount] = useRecoilState(countState);
return (
<View>
<Text>カウント: {count}</Text>
<Button title="増やす" onPress={() => setCount(count + 1)} />
<Button title="減らす" onPress={() => setCount(count - 1)} />
</View>
);
};
export default Counter;
✅ Recoilのポイント
- Reduxよりシンプル で、Context APIより強力
- パフォーマンスが良い
- まだ比較的新しい
6. まとめ：どれを選ぶべき？
✅ Redux → 大規模アプリ におすすめ
✅ Context API → 小規模アプリ に最適
✅ Recoil → 中規模〜大規模アプリ に向いている
あなたのプロジェクトに合った状態管理方法を選びましょう！🚀
コメント