[tsx]コンポーネント間のデータ共有

sample.tsx

//### 1. プロパティ（Props）を使う

//親コンポーネントから子コンポーネントにデータを渡す最も基本的な方法です。


// ParentComponent.tsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent: React.FC = () => {
  const data = "共有したいデータ";

  return <ChildComponent data={data} />;
};

// ChildComponent.tsx
import React from 'react';

interface ChildComponentProps {
  data: string;
}

const ChildComponent: React.FC<ChildComponentProps> = ({ data }) => {
  return <div>{data}</div>;
};

export default ParentComponent;


//### 2. コンテキストAPIを使用する

//複数のネストしたコンポーネント間でデータを共有する場合、ReactのコンテキストAPIを利用すると便利です。


// DataContext.tsx
import React, { createContext, useContext, useState } from 'react';

const DataContext = createContext<{
  data: string;
  setData: (data: string) => void;
} | null>(null);

export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [data, setData] = useState<string>('初期データ');

  return (
    <DataContext.Provider value={{ data, setData }}>
      {children}
    </DataContext.Provider>
  );
};

export const useDataContext = () => {
  const context = useContext(DataContext);
  if (!context) {
    throw new Error('useDataContext must be used within a DataProvider');
  }
  return context;
};

// SomeComponent.tsx
import React from 'react';
import { useDataContext } from './DataContext';

const SomeComponent: React.FC = () => {
  const { data, setData } = useDataContext();

  return (
    <div>
      <p>{data}</p>
      <button onClick={() => setData('新しいデータ')}>データを更新</button>
    </div>
  );
};

// App.tsx
import React from 'react';
import { DataProvider } from './DataContext';
import SomeComponent from './SomeComponent';

const App: React.FC = () => {
  return (
    <DataProvider>
      <SomeComponent />
    </DataProvider>
  );
};

export default App;


//### 3. 状態管理ライブラリの使用

//アプリケーションが大規模になると、状態管理ライブラリ（ReduxやMobXなど）を使用することが一般的です。これにより、アプリケーション全体の状態を一元管理できます。

//#### Reduxの例


// store.ts
import { configureStore, createSlice } from '@reduxjs/toolkit';

const dataSlice = createSlice({
  name: 'data',
  initialState: { value: '初期データ' },
  reducers: {
    setData: (state, action) => {
      state.value = action.payload;
    },
  },
});

const store = configureStore({ reducer: dataSlice.reducer });

export const { setData } = dataSlice.actions;
export default store;

// App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <SomeComponent />
    </Provider>
  );
};

// SomeComponent.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setData } from './store';

const SomeComponent: React.FC = () => {
  const data = useSelector((state: any) => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{data}</p>
      <button onClick={() => dispatch(setData('新しいデータ'))}>データを更新</button>
    </div>
  );
};

export default App;