useState フックを用いてステートにデータを置く

この記事では「React Context API を使う簡単な例」で作ったプログラムをリファクタリングして、 この後、プログラムを拡張しやすいようにします。

ポイントは、state にデータを配置することです。今回はファンクションコンポーネントを利用しているので、 useState フックを利用します。

もうひとつのポイントは Provider をラップして、Provider 利用時に詳細をみえないようにします。

useState フックを用いてデータをステートに配置するよう Provider を書き換える

まず準備として、前回 index.js に書いた配列 fruits を別ファイルにおきます。

fruit-data.js というファイルを作り、中身を次のようにします。

export const fruitData = ['Apple', 'Orange', 'Banana'];

次に FruitContext.js というファイルを作成して、中身を次のようにします。

import React, { createContext, useState } from 'react';
import { fruitData } from './fruit-data';

const FruitContext = createContext();

export const FruitProvider = ({ children }) => {
  const [fruits] = useState(fruitData);
  return (
    <FruitContext.Provider value={{ fruits }}>
      {children}
    </FruitContext.Provider>
  );
};

export const FruitConsumer = FruitContext.Consumer;

6 行目では Provider をFruitProviderという名前に置き換えています。この関数の中で FruitContext.Provider を返します。

7 行目では useState() フックを使って、state にデータを配置しています。

useState フックは初期値を受け取り、[state 変数, state 変更用の関数] という配列を返します。ここではデータを変更しないので、配列のひとつ目の要素だけを変数 fruits で受け取っています。

fruitsはプロバイダの value プロパティにセットします。

15 行目では FruitContext.Consumer を FruitConsumer という別の名前に置き換えています。

以上の変更で、index.js は次のようにシンプルに書けるようになります。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { FruitProvider } from './FruitContext';

ReactDOM.render(
  <React.StrictMode>
    <FruitProvider>
      <App />
    </FruitProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Consumer の名前の変更

上で Consumer の名前を置き換えたので、Consumer を使う App.js は次のように変わります。

import React from 'react';
import './App.css';
import { FruitConsumer } from './FruitContext';

function App() {
  return (
    <FruitConsumer>
      {(value) => {
        const { fruits } = value;
        return (
          <>
            <h1>Fruits</h1>
            <ul>
              {fruits.map((fruit, i) => (
                <li key={i}>{fruit}</li>
              ))}
            </ul>
          </>
        );
      }}
    </FruitConsumer>
  );
}

export default App;

7 行目と 21 行目が FruitContext.Consumer から FruitConsumer という名前に変わっただけです。

以上で、データをステートに配置し、さらにプロバイダやコンスーマをラップできました。

次の記事「useState フックでデータを更新する Provider と Consumer を実装する」では、ステートに配置したデータを更新可能なように書き換えます。