牌語備忘録 -pygo

最終的な 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;

追記2023-03-14: 別記事でスクリーンショット付きでやり直してみた（コードも若干違くなった）

問い「reactjs と react-router v6 と redux を利用した検索機能がある一覧表示のサンプルコードを教えてください」
- ChatGPTの返答
- 提示されたコードが途中で切れてるので整えて動くようにしてみた
とりあえず動いた
感想

ChatGPT に聞いてみた

https://chat.openai.com/chat

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

ChatGPTの返答

以下は、React.js、React Router v6、Reduxを使用して、検索機能を備えた一覧表示を実装するサンプルコードです。

まず、必要なパッケージをインストールします。

$ npm install react react-dom react-router-dom@next redux react-redux

react-router-dom@next の @next あるとエラーになるので除外してインストール

提示されたコードが途中で切れてるので整えて動くようにしてみた

App.js に集約されたたパターンで進める。
（質問繰り返してたらファイルが components とかで別れてるやつしか出てこなくなった）
（あとで ChatGPT の画面をスクリーンショット撮っておこうと思ってたら消えてた...）

ChatGPT に言われてないけど npx create-react-app はやっておく

$ npx create-react-app my-reactjs-search-sample-app

App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// ダミーデータ
const products = [
  { id: 1, name: '製品A', description: '製品Aの説明', price: 1000 },
  { id: 2, name: '製品B', description: '製品Bの説明', price: 2000 },
  { id: 3, name: '製品C', description: '製品Cの説明', price: 3000 },
  { id: 4, name: '製品D', description: '製品Dの説明', price: 4000 },
];

// リダクサー
const reducer = (state = { searchTerm: '' }, action) => {
  switch (action.type) {
    case 'SET_SEARCH_TERM':
      return { ...state, searchTerm: action.payload };
    default:
      return state;
  }
};

// ストア
const store = createStore(reducer);

// アクションクリエーター
const setSearchTerm = searchTerm => ({
  type: 'SET_SEARCH_TERM',
  payload: searchTerm,
});

// 商品一覧コンポーネント
const ProductList = ({ products, searchTerm }) => {
  // 検索結果をフィルタリング
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <>
      <h2>商品一覧</h2>
      <input
        type="text"
        placeholder="検索ワードを入力してください"
        value={searchTerm}
        onChange={e => store.dispatch(setSearchTerm(e.target.value))}
      />
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>
            <Link to={`/products/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </>
  );
};

// 商品詳細コンポーネント
const ProductDetail = ({ products }) => {
  const { id } = useParams();
  const product = products.find(p => p.id === parseInt(id));

  return (
    <>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>{product.price}円</p>
    </>
  );
};

// コンポーネントをReduxに接続
const ConnectedProductList = connect(state => ({
  searchTerm: state.searchTerm,
}))(ProductList);


function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <Router>
          <Routes>
            <Route path="/" element={<ConnectedProductList products={products} />} />
            <Route path="/products/:id" element={<ProductDetail products={products} />} />
          </Routes>
        </Router>
      </Provider>
    </div>
  );
}

export default App;