【参考例付き】簡単！React.jsのcontext機能を実装してみよう！

// app.js

import Top from './pages/top';
import Setting from './pages/setting';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useReducer } from 'react';
import SettingContext from './contexts/setting';

function App() {
  const initialState = {
    backgroundColor: 'white'
  }
  function reducer(state, color) {
    return { backgroundColor: color };
  }
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <SettingContext.Provider value={{state, dispatch}}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Top />} />
          <Route path="setting" element={<Setting />} />
        </Routes>
      </BrowserRouter>
    </SettingContext.Provider>
  );
}

export default App;

// pages/top.js

import { useState, useContext } from 'react';
import { Link } from "react-router-dom";
import SettingContext from '../contexts/setting';

function Top() {
const { state } = useContext(SettingContext);

return (
  <div style={{ padding: '20px', backgroundColor: state.backgroundColor}}>
    <h1 style={{ fontWeight: 'bold', fontSize: '32px' }}>トップ画面</h1>
    <Link to="setting">設定画面</Link>
  </div>
  );
};


export default Top;

// pages/setting.js

import React, { useContext } from 'react';
import SettingContext from '../contexts/setting';
import { Link } from "react-router-dom";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

function Setting() {
  const { state, dispatch } = useContext(SettingContext);

  function handlerRadioChange(e, color) {
    dispatch(color);
  };

  return (
    <div style={{ padding: '20px', display: 'flex', flexDirection: 'column' }}>
      <h1 style={{ fontWeight: 'bold', fontSize: '32px' }}>設定画面</h1>
      <Link to="/">top画面</Link>
      <FormControl margin='normal'>
        <FormLabel id="color-radio-buttons-group-label">背景色: {state.backgroundColor}</FormLabel>
        <RadioGroup
          aria-labelledby="color-radio-buttons-group-label"
          defaultValue={state.backgroundColor}
          name="radio-buttons-group"
          row
        >
          <FormControlLabel value="white" control={<Radio />} label="white" onChange={e => handlerRadioChange(e, 'white')} />
          <FormControlLabel value="lightgray" control={<Radio />} label="lightgray" onChange={e => handlerRadioChange(e, 'lightgray')} />
        </RadioGroup>
      </FormControl>
  </div>
);
}

export default Setting;

// contexts/setting.js
import { createContext } from 'react';
const SettingContext = createContext();
export default SettingContext;