7.1.0からフック(Hook)が備わりました。Reduxのフックです。高階(Higher-Order)コンポーネントのconnect()を使わずに済み、コードの組み立てがすっきりします。useDispatch()でStoreからdispatch()を参照するconnect()でラップしたコンポーネントを、フックで書き替えてみるのがわかりやすいでしょう。フィールドに入力したテキストを項目リストに加える」のつぎの作例(サンプル001)で試すことにします。サンプル001■react-redux-todos-02まず、モジュールsrc/components/AddTodo.jsです。connect()が引数なしに呼び出されて、ラップされた関数コンポーネント(AddTodo)は、受け取ったpropsからdispatch()を取り出して使っています。ReduxのStroreからdispatchを参照するのがuseDispatch()です。このフックを用いることにより、つぎのようにconnect()によるラップが外せます。useSelector()でStoreのstateを参照して処理するもうひとつ手を加えるのは、モジュールsrc/components/TodoList.jsです。connect()に渡す第1引数(mapStateToProps)で、stateからデータ(todos)を取り出して関数コンポーネントの引数(props)に与えていました。Storeのstateを参照するフックはuseSelector()です。引数に渡した関数はstateを受け取るので、取り出したい値を返してください。connect()とともに、その第1引数として定めた関数も要らなくなりました。Reduxのフックに書き替えたことにより、前掲サンプル001からconnect()の呼び出しがなくなりました。ふたつのモジュールの記述全体をまとめたのが、以下のコード001と002です。併せて、動きを確かめるための書き直した作例を、CodeSandboxに公開しました(サンプル002)。今回はごく簡単なコードサンプルで、試したふたつのフックの構文ももっともシンプルなものです。List」をふたつのフックで書き直します。