redux toolkit を使って 入力欄の追加ボタンを実装したい

Question

react + redux toolkit にて入力欄の追加ボタンを実装しようとしているのですが
ローカル関数での配列操作をうまくstateに反映できていないようで
ボタンを押しても入力欄がうまく追加されません。。。

以下のようなコードなのですが
"+" ボタンを押しても何も反応せずでして・・・
（consoleを見る限り、ローカル関数内の配列は無事に追加できているようなのですが、、）

原因と修正方法お分かりの方いらっしゃいましたら
ご教授お願いします。。。

import React from "react";
import './index.css';
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
//import { setupStore } from "./store";
import * as serviceWorker from './serviceWorker';
import { store } from './store';

//const store = setupStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from "react"
import { useDispatch, useSelector } from "react-redux"
import { useForm } from 'react-hook-form'
import { setAddresses } from './rootSlice'
import './common.css'

const App = () => {
  const dispatch = useDispatch();
  const Addresses = useSelector(state => state.Addresses)
  const { register, handleSubmit } = useForm();

  const addresses = ["address0"]

  const onSubmit = (data) => {
    dispatch(setAddresses(data.addresses))
  }

  const addAddress = () => {
    addresses.push(`address${addresses.length}`)
    console.log("addresses: ", addresses)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="div-block">
        {Addresses.map((address, index) => {
          return (
            <>
              <label>Address {index}</label>
              <input
                name={`addresses[${index}]`} ref={register}
              />
            </>
          )
        })}
        <button type="button" onClick={addAddress}>+</button>

        <button type="submit" className="btn-square-shadow">Apply !</button>
      </div>

      <div>
        <hr></hr>
        {Addresses.map((address, index) => {
          return (
            <>
              <div>Address {index}: {address}</div>
            </>
          )
        })}
      </div>
    </form>
  );
};

export default App;

import { createSlice } from '@reduxjs/toolkit'

const rootSlice = createSlice({
  name: "address",
  initialState: {
    Name: "XXXX",
    Addresses: ["hoge-1-1-1"]
  },
  reducers: {
    setName: (state, action) => { state.Name = action.payload },
    setAddresses: (state, action) => { state.Addresses = action.payload },
  }
})

export const reducer = rootSlice.reducer;

export const { setName, setAddresses, addAddresses } = rootSlice.actions

import { configureStore } from '@reduxjs/toolkit'
import { reducer } from './rootSlice'

export const store = configureStore({
  reducer
})

Answer 1

rootSlice.jsとApp.jsを以下のようなコードに変えたところ
自己解決しました。

  1 import { createSlice } from '@reduxjs/toolkit'
  2
  3 const rootSlice = createSlice({
  4   name: "address",
  5   initialState: {
  6     Addresses: [""]
  7   },
  8   reducers: {
  9     setAddresses: (state, action) => { state.Addresses = action.payload },
 10     addAddresses: (state, action) => { state.Addresses.push(action.payload) },
 11   }
 12 })
 13
 14 export const reducer = rootSlice.reducer;
 15
 16 export const { setAddresses, addAddresses } = rootSlice.actions

import React from "react"
import { useDispatch, useSelector } from "react-redux"
import { useForm } from 'react-hook-form'
import { setAddresses, addAddresses } from './rootSlice'
import './common.css'

const App = () => {
  const dispatch = useDispatch();
  const Addresses = useSelector(state => state.Addresses)
  const { register, handleSubmit } = useForm();

  const addresses = ["address0"]

  const onSubmit = (data) => {
    dispatch(setAddresses(data.addresses))
  }

  const addAddress = () => {
    addresses.push(`address${addresses.length}`)
    dispatch(addAddresses(""))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="div-block">
        {Addresses.map((address, index) => {
          return (
            <>
              <label>Address {index}</label>
              <input
                name={`addresses[${index}]`} ref={register}
              />
            </>
          )
        })}
        <button type="button" onClick={addAddress}>+</button>

        <button type="submit" className="btn-square-shadow">Apply !</button>
      </div>

      <div>
        <hr></hr>
        {Addresses.map((address, index) => {
          console.log("Name: ", address)
          return (
            <>
              <div>Address {index}: {address}</div>
            </>
          )
        })}
      </div>
    </form>
  );
};

export default App;

Answer 2

redux-toolkit は関係ありません。
React ではコンポーネントの state と props 以外の変数が変更されても描画の結果は変化しません。
React コンポーネントに状態を持たせるには state を使う必要があります。
コンポーネントの state が適切な方法で更新されるとそのコンポーネントは再描画されます。
関数コンポーネントであれば次のようにしてコンポーネントの状態を定義します。

const [addresses, setAddresses] = React.useState(['address0']);
...

setAddresses(`address${addresses.length}`);

React の基本的なことなのでチュートリアルの概要を読み直すことをおすすめします。：
https://ja.reactjs.org/tutorial/tutorial.html#overview

Comments

[07290729]

og24715さん
ご回答ありがとうございます。
おっしゃるようなuseStateを用いたコードはすでに以下で作成済みです。
https://teratail.com/questions/267504

ただ本件では複数のコンポーネントで親子孫の関係になっているコード群で
状態管理と結果としての描画が最終ゴールなのですが
useStateではstate更新→renderが再renderの限界エラーになってしまい断念しました。
※<input name="hoge" /> などの単一の値であれば不要ですが
　hoge1, hoge2, hoge3,,,, などの同じ種類の異なる値群を扱おうとしたときに
　なんらかの形でこの状態を保持しようとしたところ複数の親子関係でstate更新→再renderが発生し
　このエラーとなりました。。。

（このエラー発生したコードについては業務で書いているコードに直接関連するもので
すぐには具体的なコードをここにあげられない状態です。。。申し訳ありません）

そこで状態管理方法を一から構築しなおし
その過程で状態管理のコードをシンプルに書けるredux toolkitを導入した次第です。

"state と props 以外の変数の変更"で再renderを防ぎ
追加ボタンを押すことなどの具体的なアクションで
stateに反映→再renderというロジックを想定しています。

[og24715]

？テキストフィールドをリアルタイムでコンポーネント state ではなく、Redux で管理したいってことですか

[07290729]

私の知識がとぼしく、内容を正確にとらえられているか自信はないですが
おそらくおっしゃられている内容どおりです。