HookstechReactのコンポーネントに状態を持たせる方法をいくつかがあるが以下を紹介する。ReduxのHooksサンプルの内容はinputでテキストを編集してinputの中身を別の場所で表示する単純なもの。ReactのuseStateReactのuseStateを使う。一つのコンポーネント内で完結するのならば一番楽。不便な点は複雑なコンポーネントになるとコールバックを子供の引数に渡してあちこち引き回すことになってややこしいこと。Reduxreduxを使った普通の書き方。グローバルに定義されたストアから状態を参照できる。状態の書き換えはreducerに集約される。お約束の定義がそれなりにあるのでこのサンプル程度のことをやるにはめんどくさい。あとコンポーネントのpropsをマッピングを定義するのがボイラープレートぽくて大量に書くと嫌になる。);};ReactのuseRecuerReactの新しいAPIのHooksに導入されてuseReducerを使うやりかた。子コンポーネントにコールバックを引き回す必要があるがdispatchだけを渡せばいいのでそこはuseStateに比べて簡素になった。それでもdispatch引き回しがあるのは面倒だと思われる。APIを使う方法が導入された。useSelectorとuseDispatchを使う。useSelectorで状態を読み出しuseDispatchで状態を書き換える。reducerなどは普通のreact-reduxと同じ。connectでpropsのマッピングがする必要がなくなったのは楽になった思う。ReduxのHooksを使うのが一番わかりやすいと思う。最初に一々マッピングを定義するのがボイラープレートぽくてめんどくさいし必要な状態が変わったときにコンポーネントの定義やマッピングの定義をいちいち書き換える手間が減ったのは楽になったように見える。GitHubで編集を提案takakihiバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。