React Reduxとは？Redux公式React Binding

ページ内ナビ

概要

React ReduxはRedux storeとReact UIを接続する公式bindingです。Providerでstoreをcomponent treeへ公開し、useSelectorでstateを購読、useDispatchでactionをdispatchします。既存のconnect APIも維持しつつ、現在の推奨はhooks中心です。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

ProviderでRedux storeをReact component treeへ公開する

Providerにstoreを渡すと、その配下のcomponentからReact Redux APIを通じて同じstoreへアクセスできます。application root付近にbinding boundaryを置き、UIとstate containerの接続点を明示できます。

出典：[1]

useSelectorで必要なstateを購読しuseDispatchでactionを送る

hooks APIはfunction componentからstore stateの一部を選択し、更新時の再描画とaction dispatchを扱います。Redux Toolkitで構築したstoreともそのまま組み合わせられます。

出典：[1][2]

既存のconnect APIも互換目的で利用できる

v9.3.0ではconnectへdeprecated annotationが追加されましたが、behavior変更や削除は行われていません。移行が難しい既存componentを維持しながら、段階的にhooksへ移せます。

出典：[3]

向いている用途

複数画面で共有するRedux stateとReact UIの接続を標準化したい場合に向く

global/shared state、normalized entity、async workflow等をRedux側で管理し、React componentから一貫した購読・更新APIを使いたいapplicationに適します。

出典：[1]

導入前の確認

9.3.0はReact 18/19をpeer dependencyとして要求する

package metadataはReact ^18.0 || ^19を要求し、Reduxは^5.0.0をoptional peerとして定義しています。legacy React環境では9.xへ上げる前に互換性を確認してください。

出典：[2]

新規コードではconnectよりhooksが推奨される

9.3.0 releaseではconnectがdeprecated表示になり、useSelector/useDispatchへの移行が推奨されています。deprecatedは即時削除を意味しないため、既存codebaseでは段階移行できます。

出典：[3]

参考にした公式資料

[1]React Redux v9.3.0 README(2026-10-05)
[2]React Redux v9.3.0 package metadata(2026-10-05)
[3]React Redux v9.3.0 release(2026-10-05)
[4]React Redux MIT license(2026-10-05)

編集部からの補足

新規実装ではRedux Toolkitとhooks中心の構成が推奨です。connectは9.3.0でdeprecated表記になりましたが、runtime behaviorは変わらず削除予定も示されていません。

3ステップで試す

1
固定版のReact Redux環境を作る
一時npm projectへReact Redux 9.3.0とpeer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/react-redux.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact react-redux@9.3.0 redux@5.0.1 react@19.2.0 react-dom@19.2.0
2
ProviderとuseSelectorを使う最小componentを書く
browserを起動せず、Provider配下のfunction componentがstore stateを購読する最小例を作ります。
printf '%s\n' "import React from 'react'" "import { Provider, useSelector } from 'react-redux'" "import { createStore } from 'redux'" "import { renderToStaticMarkup } from 'react-dom/server'" "const store=createStore((state={count:1})=>state)" "function Counter(){const count=useSelector(s=>s.count);return React.createElement('span',null,'count='+count)}" "console.log(renderToStaticMarkup(React.createElement(Provider,{store},React.createElement(Counter))))" > demo.mjs
3
server render結果を確認する
React Redux経由でstateがcomponentへ届き、期待するmarkupへrenderされることを確認します。
test "$(node demo.mjs)" = '<span>count=1</span>'

公式READMEで確認

成長

成長の推移 · 直近30日

23,424 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 59
Open PR: 4

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
redux

Stars: 23,424
Forks: 3,323
Watchers: 387
Open Issues: 6
Contributors: 279
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/30