Reactでinputの値を送信。(ReduxのReducerについて。)

Question

Reduxを使ってReactを書いています。今回はそのReduxの中のReducerについての質問です。

現在はtodoアプリケーションを作っております。
まずはAddTodoComponentというReducerを作っておりまして
をれをconnectすることでmapDispatchToPropsの中でonSendHandleを定義しています。

このReducerの中にあるinputの値をonSendhandleにて送信したいのですが、
中身の値の参照のやり方がわかりません。

書き方が何通りもありまして、なかなかしっくりくるものがありませんでして、質問に至りました。
どうぞよろしくお願いいたします。

class AddTodoComponent extends React.Component{
  render(){
    let input;
    const { onSendHandle } = this.props;
    return(
      <div>
        <form onSubmit={this.props.onSendHandle}>
          <input ref="inputText" />
          <button type="submit">
            Add Todo
          </button>
        </form>
      </div>
    );
  }
}
const mapDispatchToPropsAdd = (dispatch) => {
  return{
    onSendHandle:() => {dispatch(addTodo(this.refs.inputText.getDOMNode().value))}
  }
}
const AddTodo = connect(
  mapDispatchToPropsAdd
)(AddTodoComponent)

Answer 1

react-redux であれば、フォーム上の一時的な変更も含めて、すべてを store の一時領域に送っておき、ユーザが OK ボタンで submit したときに、サーバに送出するみたいな考え方が正しいのではないかと思います。

つまり、 <input ref="inputText" /> に onChange ハンドラをつけて、一文字入力される毎にアクションを生成し、すべての変更を store 上の一時領域に反映します。それで、 submit の動作でデータをサーバに送出します。

どちらでも同じように感じられるかもしれませんが、たとえば、「入力内容にエラーがあるいあいだは、OKボタンが有効にならない」みたいな仕様を実現しようとすると、1文字毎の変更が OK ボタンの見た目に影響を与えることになり、アクションが View と独立に扱える Reduｘ の威力が発揮されるポイントとなります。

あと、 form submit と API によるサーバへのアクセスを併用すると、 form の submit 時にブラウザが勝手にサーバに HTTP POST を送るので、 API でのデータ送出と二重になってしまう場合があるので、注意が必要です。

もう一点、

const AddTodo = connect(

mapDispatchToPropsAdd
)(AddTodoComponent)

mapDispatchToProps って connect の第二引数じゃなかったでしたっけ？
connect の第一引数は mapStateToProps でコールバックの引数が異なり、今のコードの dispatch 引数の参照がうまく動作しないように思うのですが。

Comments

[yuki_nagahama]

確かに１文字ずつ監視したほうがbuttonにも反映させることができますので
こちらでやってみます。ありがとうございました。

そして、dispatchは調べてみると第二引数だったので
connect(
mapStateToProps,
mapDispatchToProps
)(AddTodoComponent)

でやるとできました。
ありがとうございます。