Next.js+Typescript+ContextAPIで予算トラッカーを作ってみた

今回作ったもの

作品はこちら
コードはこちら

作った経緯

ContextAPIを使ってみたかった為

コードの解説

コンポーネントをAppContextに接続する

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Budget = () => {
	const { budget } = useContext(AppContext);
	return (
		<div className='alert alert-secondary'>
			<span>予算: {budget}円</span>
		</div>
	);
};

export default Budget;

• ContextからAppContextをインポートする。（2行目）
• useContextをimportし、AppContextを渡します。これは、グローバル状態から値を取得するためにコンポーネントがコンテキストに接続する方法です。
• Contextから予算を取得するためにHookを使用します（5行目）
• JSXで予算をレンダリングしています（9行目）

AppContextで状態を管理する

import { createContext, ReactNode, useReducer } from "react";

interface AppProviderProps {
    children: ReactNode;

}

const AppReducer = (state: any, action: any) => {
	switch (action.type) {
		case 'ADD_EXPENSE':
			return {
				...state,
				expenses: [...state.expenses, action.payload],
			};
            case 'DELETE_EXPENSE':
			return {
				...state,
				expenses: state.expenses.filter(
					(expense: { id: any; }) => expense.id !== action.payload
				),
			};
		default:
			return state;
	}
};

interface ContextType  {
    budget: number;
	expenses: [
		{ id: number, name: string, cost: number }
	];
    dispatch: any;
}

const initialState = {
	budget: 20000,
	expenses: [
		{ id: 12, name: '買い物', cost: 40 },
		{ id: 13, name: '遊び', cost: 400 },
		{ id: 14, name: '車', cost: 500 },
	],
};

export const AppContext = createContext({} as ContextType);

export const AppProvider = (props: AppProviderProps) => {
	const [state, dispatch] = useReducer(AppReducer, initialState);

	return (
		<AppContext.Provider
			value={{
				budget: state.budget,
				expenses: state.expenses,
				dispatch,
			}}
		>
			{props.children}
		</AppContext.Provider>
	);
};

ContextとReduxのどちらを使うべきか？

結論：場合による
Reduxは大規模な開発または、Reduxに精通している人が多くいれば使えば良い。
Reduxを使うほどでもないと思えば、Contextを使えば良い。