react-redux【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、react-reduxのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。Reduxのサイトに似てる！
React Redux · Official React bindings for Redux

Philosophy、Motivation、Back Story

特になし

実際に使ってみる

Why Use React Redux? · React Redux
ReduxといえばReact！というイメージが強かったのですが、Angular, Vue, Ember, vanilla JS...といろんなライブラリで使えるんですね。

そして、このreact-reduxというライブラリはReact公式のUIバインディングライブラリだそうです。
UIバインディングっていうのは、アプリケーションに「データに変更があったよー」と教えてくれるもののことだそうです。

Provider

Storeのモックを作らないといけないテストを書くときによく見かけます。
このライブラリのおかげで使えていたのですね。
React Redux · Official React bindings for Redux

connect()

connectを使うと、Reduxで作ったオブジェクトをReactで使えるようになるんですね。

import { connect } from 'react-redux'
import { increment, decrement, reset } from './actionCreators'

// const Counter = ...

const mapStateToProps = (state /*, ownProps*/) => {
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = { increment, decrement, reset }

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)