【React Native + Expo】useContextとuseReducerの利用方法について①
Qiita初心者です。
誤字脱字、至らない点があるかもしれませんがよろしくお願いします。
解決したいこと
React Native + Expoでアプリをつくっています。
hooksのuseContextとuseReducerを使用し
グローバルな値をどのコンポーネントでも更新ができるようにしたいです。
親コンポーネントにまとめて必要な処理を記述する方法ではうまくいきましたが、
親コンポーネントが膨大な記述になるので、
別ファイル内でグローバルなデータの状態管理をしたいのです。
しかし、以下エラーが表示されてしまい、うまくいきません。
React Nativeも初心者なもので、
解決策についてご教示いただけましたら幸いです。
以下を参考にさせていただきました。
（5 Context用のコンポーネントを作成）
https://reffect.co.jp/react/react-usecontext-understanding#Context
該当するソースコード
【階層】
【親コンポーネント】
TestScreen.jsx
import React from 'react';
import { View, Text } from 'react-native';
import TestComponent from '../components/TestComponent';
import { CountProvider } from '../context/TestContext';
export default function TestScreen() {
return (
<CountProvider>
<View>
<Text>
親コンポーネントのテキスト
</Text>
< TestComponent />
</View>
</CountProvider>
);
}
【子コンポーネント】
TestComponent.jsx
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useCountContext } from '../context/TestContext';
export default function TestComponent() {
const { state, dispatch } = useCountContext();
return (
<View>
<Text>子コンポーネントのここに表示→{state.count}</Text>
<TouchableOpacity onPress={() => dispatch({ type: "decrement", count: state.count})}>
-
</TouchableOpacity>
<TouchableOpacity onPress={() => dispatch({ type: "increment", count: state.count})}>
+
</TouchableOpacity>
</View>
);
};
【Contextファイル】
TestContext.jsx
import React, { createContext, useReducer, useContext } from 'react';
const CountContext = createContext();
export function useCountContext() {
return useContext(CountContext);
}
export function CountProvider({ children }) {
//＝＝＝＝＝＝＝＝
// 初期値設定
//＝＝＝＝＝＝＝＝
const initialState = {
count: 100,
};
const reducer = (state, action) => {
//＝＝＝＝＝＝＝＝
// 値変更処理
//＝＝＝＝＝＝＝＝
if (action.type == "increment") {
return { count: state.count + 1 };
} else if (action.type == "decrement") {
return { count: state.count - 1 };
}
};
const [state, dispatch] = useReducer(reducer, initialState);
return (
<CountContext.Provider value={ [state, dispatch ] }>
{children}
</CountContext.Provider>
);
}
よろしくお願いいたします。
0
