（再）ChatGPT に ReactJS + react-router + redux を利用した検索機能がある一覧表示のサンプルコードを教えてもらったのでメモ

前置き

前回 と少し変えて質問してみた 同じ質問でも違うこと返答になるけど、質問の仕方で ChatoGPT の返答の質が上がりそうな気もする。

(ChatGPT の画面全体をうまくスクショで撮れなくて分割になってしまった)

ChatGPT に質問

reactjs を と react-router v6 利用した検索機能がある一覧表示のサンプルコードを教えてください

これを redux を利用したものに変更してください

続きを教えてください

最終的な reactjs + react-router v6 + redux を利用した App.js のコード

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link, useParams, useNavigate } from "react-router-dom";
import { createStore } from "redux";
import { Provider, useDispatch, useSelector } from "react-redux";

const initialState = {
  data: [
    { id: 1, name: "John", age: 25 },
    { id: 2, name: "Jane", age: 30 },
    { id: 3, name: "Bob", age: 40 },
    { id: 4, name: "Alice", age: 22 }
  ],
  filter: ""
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_FILTER":
      return { ...state, filter: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer);

const List = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { data, filter } = useSelector((state) => state);

  const handleFilterChange = (e) => {
    dispatch({ type: "SET_FILTER", payload: e.target.value });
  };

  const filteredData = data.filter((item) =>
    item.name.toLowerCase().includes(filter.toLowerCase())
  );

  const handleItemClick = (id) => {
    navigate(`/details/${id}`);
  };

  return (
    <div>
      <input type="text" value={filter} onChange={handleFilterChange} />
      <ul>
        {filteredData.map((item) => (
          <li key={item.id} onClick={() => handleItemClick(item.id)}>
            {item.name}, {item.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

const Details = () => {
  const { id } = useParams();

  const { data } = useSelector((state) => state);

  const item = data.find((item) => item.id === parseInt(id));

  return (
    <div>
      <h2>{item.name}</h2>
      <p>Age: {item.age}</p>
    </div>
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <nav>
          <Link to="/">List</Link>
        </nav>

        <Routes>
          <Route path="/" element={<List />} />
          <Route path="/details/:id" element={<Details />} />
        </Routes>
      </Router>
    </Provider>
  );
};

export default App;

ブラウザで表示させる

このあたりの説明がなかった

$ npx create-react-app sample-search-app
$ cd sample-search-app
$ npm install react-router-dom react-redux redux
$ npm run start

• http://localhost:3000/