Reduxでのform部分の操作について

Reduxを使っているときのフォーム操作について

Reduxでのformデータの操作について悩んでいます。
setterのみのactionをわざわざ作るなら、コンポーネントにstateを持たせて送信するときだけactionをdispatchして更新したらダメなの？
と思ったのですがどうなんでしょうか？

Reducer・actionを使用しsetterを用意

const initialUser = {
  name: '',
  email: '',
  pass: '',
}

// Reducer
const userForm = (state = initialUser, action) => {
  switch (action.type) {
    case actionType.CHANGE_NAME: {
      return {
        ...state,
        name: action.name
      }
    }
    case actionType.CHANGE_MAIL: {
      return {
        ...state,
        mail: action.email
      }
    }
    case actionType.CHANGE_PASS: {
      return {
        ...state,
        pass: action.pass
      }
    }
    default:
      return state
  }
}
export default userForm

// ./actions
export const actionType = {
  CHANGE_NAME:'CHANGE_NAME',
  CHANGE_EMAIL:'CHANGE_EMAIL',
  CHANGE_PASS:'CHANGE_PASS',
}

export const changeName = name => {
  return {
    type:actionType.CHANGE_NAME,
    name:name
  }
}

export const changeEmail = email => {
  return {
    type:actionType.CHANGE_EMAIL,
    email:email
  }
}

export const changePass = pass => {
  return {
    type:actionType.CHANGE_PASS,
    pass:pass
  }
}

componentでstateとdispatchを呼んで処理

const Form = () => {
  const name = useSelector(state => state.userForm.name)
  const email = useSelector(state => state.userForm.email)
  const pass = useSelector(state => state.userForm.pass)

  const dispatch = useDispatch()

  return (
    <input type="text" value={name} onChange={e => dispatch(changeName(e.target.value))} placeholder="...name" />
    <input type="email" value={email} onChange={e => dispatch(changeEmail(e.target.value))} placeholder="...mail" />
    <input type="password" value={pass} onChange={e => dispatch(changePass(e.target.value))} placeholder="...pass" />
  )
}
export default Form

componentでstateを用意してsetする

const Form = ()=> {
 const [ name, setName ] = useState('')
 // ...etc

 const doSubmit = e => {
  // ...
 }

 return (
  <form onSubmit={doSubmit}
    <input type="text" value={name} onChange={e => setName(e.targt.value)} />
    // ...etc
　  <input type="submit" value"submit" />
  <form/>
// 送信するときに
 )
}

補足情報

React hooks, Redux hooks を使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

フォームから入力されるユーザー名、パスワード、メールアドレスが、他の画面からも使われる可能性があるか、あるならばどういう使われ方なのか、といった詳細が分からないと、はっきりしたことは言えませんが、このフォームが使われるのはログイン画面（および新規ユーザー登録画面）だと思いますので、それらの画面で入力中の値を他の画面でも共有する必要はほぼないのではないかと思います。そうだとすると、Redux storeに入れる必要はないので、後者の「componentでstateを用意してsetする」でよいかと思います。

それでは、Ｒｅｄｕｘのstoreにはユーザー名とメールアドレスを保持しないのかというと、そうではなく、もし保持しておくとしたら、フォームからの入力中だったり、[送信]ボタンがクリックされたときのユーザーからの入力値ではなく、それらの値をユーザー情報ＡＰＩでサーバーに送ってユーザー認証が成功し、そのAPIのレスポンスにユーザー名とメールアドレス含む登録情報があれば、これをRedux store に保存する、というのはあると思います。

ただし、フォームからの入力をReduxに保持しておく必要があるような機能を（やや無理矢理ですが）思いつくことはできます。たとえば、[送信]ボタンをクリックした時点での入力値を履歴として保存しておきたいような場合です。そういう要件が無い限りは、後者の「componentでstateを用意してsetする」でよいかと思います。

最後に経験談ですが、いくつかReduxを使った開発を業務で経験しましたが、Reduxを使っているからといって、あるコンポーネント内で完結する状態の値までも、すべてRedux storeに入れなければならない、という制限の課されたプロジェクトは無かったです。

以上、何か参考になれば幸いです。

投稿2020/02/09 07:35