Reduxのstateとdispatchについて

Question

当方、reduxを勉強中です。
勉強中に不思議に思ったことがあり、質問させていただきます。

それはcontainerのなかにでてくる、dispatchとstateについてです。
これは、あるcontainerの中にあるファイルです。

import { connect } from 'react-redux'
import TodoList from '../components/todolist'

const mapStateToProps = (state) => {
  return {todos: state.todos}
}

const VisibleTodoList = connect(
  mapStateToProps
)(TodoList)

export default VisibleTodoList

mapStateToPropsにアロー関数によってstateという引数が指定されていますが、実際にmapStateToPropsを使う際には引数が渡されていません。

同じく、こちらもcontainerフォルダにある別のファイルです。

import React from 'react'
import { connect } from 'react-redux'
import { add } from '../actions'


let AddTodo = ({dispatch}) => {
  let input
  return (
    <div>
      <input ref={(node) => {
        input = node
      }} />
      <button onClick={() => {
        dispatch(add(input.value))
        input.value = ''
      }}>
        Add Todo
      </button>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

dispatchという引数がAddTodoに指定されていますが、このAddTodoというメソッドが使われる際に、やはり引数が渡されていません。

・質問
1.なぜ、引数を指定していて、実際にメソッドを使う際には渡していないにも関わらず、
メソッドが動くのかがわかりません。reduxの特別な仕様という理解でよろしいでしょうか。

2.また、この挙動はcontainerのみに今の所見受けられるのですが、それには何か意味があるでしょうか。

何卒よろしくお願いします。

Answer 1

mapStateToPropsにアロー関数によってstateという引数が指定されていますが、実際にmapStateToPropsを使う際には引数が渡されていません。

dispatchという引数がAddTodoに指定されていますが、このAddTodoというメソッドが使われる際に、やはり引数が渡されていません。

使われる際、と思ったのはどの箇所でしょうか。

const VisibleTodoList = connect(
  mapStateToProps
)(TodoList)

これは「使っている（呼び出している）」わけでなく、「connect関数の引数」として「mapStateToProps関数」を渡しているだけです。

AddTodo = connect()(AddTodo)

これは「connect関数の戻り値の関数の引数」として「AddTodo関数」を渡しているだけです。（その結果の戻り値をさらにAddTodoに代入してますが）

どちらもmapStateToProps、AddTodo関数の呼び出しコードではく、それらの関数そのものが「別の関数」の引数になっており、その「別の関数」内部で色々やった結果、実際に「mapStateToProps、AddTodoを呼び出す時」に、mapStateToProps、AddTodo関数に引数が渡されます。

Comments

[tomoharu]

迅速なご回答ありがとうございます。「使われる際」はまさに自分が上記で書いていた部分でした。実行するのではなく、単に引数として関数を渡すということですね。。ありがとうございます。ご回答拝見しますと、それでは最終的にはstateやdispatchという引数には何かしらの値が渡されるということでしょうか(内部で色々やった結果)。それはReduxの仕様であり、どのようなものかは理解するのは難しいということでよろしいでしょうか。何卒よろしくお願いします。

[gentaro]

前段の部分はその理解で良いと思います。
どのようなものか、については、公式リファレンス等を読んで難しい、と感じたのであれば、当面はオマジナイだと思っておけば良いと思います。

https://react-redux.js.org/api/connect

[gentaro]

ちょっと言葉が不足していたかもしれないので付け加えると「Reduxを使う」事を重視するのであれば、「この関数を使うと何が出来るのか」「使わないと何ができないのか」を知っていれば十分だと思います。
内部でどのような処理がなされているのかに興味があるのであれば、各種解説サイトを読んでみたり、せっかくのオープンソースなのでソースを追ってみる、という手もあります。（たぶんそこまでは求めてないと思いますが…）

[tomoharu]

承知しました。色々調べてみたのですが、これらはpropsということで現状理解しています。了解しました。ありがとうございました。