React-reduxのmapDispatchtoProps内のアロー関数にはどのような引数を書けばよいのですか?

分からないこと

const mapDispatchToProps = (dispatch) => (
    {
        onChange: (?) => dispatch(changeValue(?))
    }
);

?に何を書いたら良いのかが分かりません。

発生している問題

textフォームのvalueが変更されません。

const TextForm = ({ value, onChange }) => {
    return(
        <>
            <p>{value}</p>
            <input type="text" defaultValue={value} onChange={(e) => onChange(e.target.value)} />
{// onChangeの(e)の部分も間違っているような気がします}
        </>
    );
}

import { connect } from 'react-redux';
import { changeValue } from '../actions/actions';
import TextForm from '../components/TextForm';

const mapStateToProps = (state) => (
    {
        value: state.textFormReducer.value
    }
);

const mapDispatchToProps = (dispatch) => (
    {
        onChange: (value) => dispatch(changeValue(value))
    }
);

const TextFormContainer = connect(mapStateToProps, mapDispatchToProps)(TextForm);

export default TextFormContainer;

export default function textFormReducer(state = VALUE, action) {
    switch (action.type) {
        case CHANGE_VALUE:
            // return {value: state.value};
            return (
                Object.assign({}, state, {value: state.value})
            )
        default:
            return state;
    }
}

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

回答2件

ベストアンサー

こんにちは。
では、回答として転記させて頂きますね。

もう少し細かく分解すると、以下のような感じになります。

(1) テキストインプット <input type="text"> に何か文字を打ち込むと、inputのonChangeが発火する。このときのイベントオブジェクトをeとする。

(2) TextForm の prop として渡されてきた onChange が、引数として e.target.value を渡されて呼ばれる。

(3) TextFormはreduxにconnectされており、TextForm の prop onChange には、

mapDispatchToProps で指定した、

(value) => dispatch(changeValue(value))

という関数が渡されてきているので、 (2)の引き続きとして、まず、

dispatch(changeValue(e.target.value))

が呼ばれる。

(4) アクションクリエータが changeValue(e.target.value)　と呼ばれると、これは

type が CHANGE_VALUE で、
valueプロパティが e.target.value

のアクションを返す。

(5) dispatch(changeValue(e.target.value))　によって、上記 (4)で作成されたアクションがstoreに送出(dispatch)される。

(6) アクションがstoreにdispatchされると、redux の機構によってtextFormReducer が呼ばれ、この第1引数に現在のstate、第2引数に (5)でstore に送出されたアクションが入ってくる。

(7) textFormReducerは、渡されたアクションのtypeごとの処理を行い、actionの内容を使用して更新後のstateを作って返す。この例の場合は、action.value を state.value の新しい値として上書きするように更新する。

(8) redux の機構によって (7)で textFormReducer が返した値で、 store 内のstateが更新される。

(9) redux (およびreact-redux) の機構によって、上記 (8) の state の更新を TextFormContainer は知らされ、 mapStateToProps によって更新されたstate の value プロパティを、TextForm の prop value に渡す。

(10) 更新されたprop valueを受け取ったTextFormは、新たな prop value の値で再度renderされる。これによって、 <p>{value}</p>　の部分に、新しい値が反映される。

補足

もう一点、

return Object.assign({}, state, { value: action.value });

でもよいのですが、スプレッド構文( ... ) を使った、

javascript
1return { ...state, value: action.value };

という書き方もよく使います。

補足2

もうひとついいでしょうか。

jsx
1<input type="text" defaultValue={value} onChange={(e) => onChange(e.target.value)} />

と書いている部分ですが、より丁寧に書けば、

jsx
1const TextForm = ({ value, onChange }) => {
2
3    const handleChange = (e) => {
4        onChange(e.target.value);
5    }
6
7    return( ・・・

という感じで、 handleChange という、 handle が接頭辞の関数（の入る変数）を作っておいて、

jsx
1<input type="text" defaultValue={value} onChange={handleChange} />

と書くやり方（流儀、ですかね）もあります。
つまり

handle･･･　という名前でコールバックを入れる変数を作って、
そこでpropから渡されたコールバックを使う関数を書き、
render に現れる子コンポーネントの on何とか prop に渡す

というパターンです。

投稿2020/04/18 11:18

jun68ykt

総合スコア9058

jun68ykt

2020/04/18 11:26

(1)から(10)の流れで、特に押さえておくべきステップは、説明の中に redux の機構によってと書いてあるところです。そこを押さえて、「何をreduxはやってくれるのか？」「 reduxがやってくれていることを自分のコードで自作しようとしたら、どのようなコードを用意しなければならないのか？」みたいなことを考えると redux の御利益が分かってきます。

退会済みユーザー

2020/04/18 11:32

たくさんあるので勉強のし甲斐がありますね。ありがとうございます！

jun68ykt

2020/04/18 11:42

どういたしまして。 > 勉強のし甲斐がありますね。とのことで、よかったです????

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

  onChange: (value) => dispatch(changeValue(value))

      return Object.assign({}, state, { value: action.value });

にしたら変更できました。
これは、
0. テキストフォームの変更でonChangeが発火して、valueを引数にchangeValueアクションが呼ばれる
0. dispatch(changevalueアクション)でreducerが呼ばれる
0. action.〇〇でオブジェクトの値にアクセスできる
から?（自信なし）

投稿2020/04/18 06:51

退会済みユーザー

総合スコア0