useSelectoreから取得したデータをuseStateにsetしたい

Question

技術スタック

React, Redux ToolKit, TypeScript, Next.js

作りたいアプリ

他画面で入力した値をRedux ToolKitの機能を使って別の画面で表示する

解決したい事象

フロントエンド初学者です。
useSelectoreから取得したデータをuseStateにsetし、map処理で1行ずつ取り出そうとすると、エラーになってしまいます。

useStateの定義

let property: Property[] = [];
const [users, setUser] = useState(property);

useSelectoreからデータの取得

以下の方法でuseSelectoreからデータを取得しています。
const storeState = useSelector((state) => state.stateManagement);
storeStateをコンソールに出力した結果がこちらです。

Stateへset処理

setUser(storeState)

map処理

map処理を一部抜粋します。

{users.map((user) => {
return (
<td className="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">
{user.name}
</td>
)}

エラー内容

ソースコード全体

ソースコードはGitHubにpushしております。
https://github.com/makoxty/next_ts_tailwindcss
事象に関係ありそうなファイルの説明をします。
ListBody.tsxが一覧画面を表示するためのファイルです。
今回のエラーはこのファイルで起きています。
Add.tsxがデータを入力する画面です。
なので流れとしては、localhost:3000にアクセスすると一覧画面が表示されます。
最初は何もデータがないので、テーブルのヘッダだけ表示されていて欲しいです。
ナビゲーションの 登録 リンクよりデータの登録画面へ遷移し、データを入力します。
入力完了後に登録ボタンを押下し、ナビゲーションの Home リンクを押下後、入力画面で入力したデータが一覧に表示されていてほしいです。

Comments

[hoshi-takanori]

「useSelectorから取得したデータをuseStateにset」すると、useSelector で取得した値 (redux が持つ、single source of truth であるべき値) とは別に、ローカルの state ができて二重管理することになると思いますが…。

[makoxti]

なるほどです。
useSelectorから取得したデータを一覧で表示するにはどのように実装すればよろしいでしょうか。
具体的には、useSelectorから取得したデータをmapで繰り返して処理する実装方法のイメージがつかないです。

[hoshi-takanori]

ソースコード拝見しましたが、stateSlice.tsx で add した時に、配列への要素の追加になってないですね。
また、Add.tsx を見ると、そもそも state の扱い方の理解に問題がありそう…。

[makoxti]

ソースコードを見て頂きありがとうございます。
なるほど、Stateの理解に問題があるのですね。
Stateも含め、ReactHooksでの開発方法の考え方の参考になるサイトや参考書等ご存知であれば教えて頂きたいです。

Answer 1

解答がこないためクローズ

Answer 2

添削してみます。

Property.ts

• Property という型はユーザーを意味しているようなので、User にすると良いでしょう。
• RootState という型名は redux が扱う state 全体を表すので、ここでは使いません。
  UsersState という名前にして、ユーザーの配列を持つようにすると良いでしょう。
• これらは redux が扱う state の型なので、pages/components の下じゃない方が良い気が…。

export interface User {
  name: string;
  sex: string;
  age: number;
  hobby: string;
  index: number;
}

export type UsersState = User[];

stateSlice.ts → usersSlice.ts

• ユーザーの配列を扱う slice なので、usersSlice という名前にすると良いでしょう。
  この slice が持つ state はユーザーの配列、つまり UsersState (User[]) になります。
• initialState に空文字列が入った要素を持たせるのは良くないですね。
  空の配列にして、as UsersState で型を指定すると良いでしょう。
• アクション名は単なる add よりも addUser の方が分かりやすいような。
  また、action の型は PayloadAction を使って action.payload の型を指定しましょう。
• addUser の引数 UserWithoutIndex は、User のうち index を含まないものです。
  参考: 【TypeScript】型定義の指定したプロパティのみ利用したい（Pick, Omit）
• addUser では次の index を計算して、そのユーザーを追加した配列を返します。
• replaceUsers はユーザーの配列をまるごと入れ替えるものです。

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { User, UsersState } from "../interface/Property";

type UserWithoutIndex = Omit<User, "index">;

export const usersSlice = createSlice({
  name: "users",
  initialState: [] as UsersState,
  reducers: {
    addUser: (state, action: PayloadAction<UserWithoutIndex>) => {
      const index = Math.max(0, ...state.map(user => user.index)) + 1;
      return [...state, { ...action.payload, index }];
    },
    replaceUsers: (state, action: PayloadAction<UsersState>) => {
      return action.payload;
    },
  },
});

export const { addUser, replaceUsers } = usersSlice.actions;

export default usersSlice.reducer;

store.ts

• stateManagement ではなく users にしましょう。
• RootState は redux が扱う state 全体の型、AppDispatch は dispatch の型になります。

import { configureStore } from "@reduxjs/toolkit";
import usersSlice from "./usersSlice";

export const store = configureStore({
  reducer: {
    users: usersSlice
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

Add.tsx

• useState つまりこの画面に固有の state は、name, sex, age, hobby だけです。
• ユーザー追加の際、新しい index は reducer で計算するので、ここでは不要になります。

import React, { useState } from "react";
import { Layout } from "./Layout";
import Header from "./Header";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../redux/store";
import { addUser } from "../../redux/usersSlice";

const Add = () => {
  const dispatch = useDispatch<AppDispatch>();
  
  const [name, setName] = useState("");
  const [sex, setSex] = useState("");
  const [age, setAge] = useState(0);
  const [hobby, setHobby] = useState("");

  const handleChangeName = (e: any) => {
    setName(e.target.value);
  };

  const handleChangeSex = (e: any) => {
    setSex(e.target.value);
  };

  const handleChangeAge = (e: any) => {
    setAge(parseInt(e.target.value) ?? 0);
  };

  const handleChangeHobby = (e: any) => {
    setHobby(e.target.value);
  };

  const onClickButton = () => {
    dispatch(addUser({ name, sex, age, hobby }));
  };

  return (
    // 略
          <button
            type="button"
            onClick={onClickButton}
    // 略

ListBody.tsx

• ユーザーの一覧を表示するだけなら、独自の state を持たないので、useState は不要です。

import Link from "next/link";
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState, AppDispatch } from "../../redux/store";
import { replaceUsers } from "../../redux/usersSlice";

const ListBody = () => {
  const users = useSelector((state: RootState) => state.users);
  const dispatch = useDispatch<AppDispatch>();

  const dataInsert = () => {
    const newUsers = [
      {
        name: "一郎",
        sex: "男",
        age: 22,
        hobby: "珈琲",
        index: 1,
      },
      {
        name: "一子",
        sex: "女",
        age: 20,
        hobby: "ピアノ",
        index: 2,
      }
    ];
    dispatch(replaceUsers(newUsers));
  };

  return (
    // 略