質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

991閲覧

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

mama1130

総合スコア13

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/02/08 11:40

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 を使用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

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

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

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

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

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

投稿2020/02/09 07:35

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mama1130

2020/02/12 02:26

すみません、ユーザー登録等のフォームと記述すべきでした。 わかりやすい説明ありがとうございます。 知識が浅く、状態は全てstoreで管理するものなのかと思っていたので最後の経験談はとてもためになりました。ありがとうございます!!
jun68ykt

2020/02/12 03:23

どういたしまして。参考になれば幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問