Redux-integrate-react
Redux-Reactの統合
前の章で、Reduxとは何か、どのように機能するかを学びました。 ここで、ビューパーツとReduxの統合を確認しましょう。 任意のビューレイヤーをReduxに追加できます。 また、reactライブラリとReduxについても説明します。
さまざまな反応コンポーネントが、最上位コンポーネントから最下位コンポーネントまですべてのコンポーネントに小道具として渡すことなく、同じデータを異なる方法で表示する必要がある場合を考えてみましょう。 反応コンポーネントの外部に保存することが理想的です。 なぜなら、データをさまざまなコンポーネントに完全に渡す必要がないため、データの取得が速くなるからです。
Reduxでそれがどのように可能かを議論しましょう。 Reduxはreact-reduxパッケージを提供し、以下に示す2つのユーティリティでreactコンポーネントをバインドします-
- プロバイダ
- 接続する
プロバイダーは、ストアをアプリケーションの残りの部分で利用できるようにします。 接続機能は、コンポーネントがストアに接続するように反応し、ストアの状態で発生する各変更に対応するのに役立ちます。
ストアを作成し、react-reduxアプリでアプリの残りの部分にストアを有効にするプロバイダーを使用する root index.js ファイルを見てみましょう。
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers/reducer'
import thunk from 'redux-thunk';
import App from './components/app'
import './index.css';
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(thunk)
)
render(
<Provider store = {store}>
<App/>
</Provider>,
document.getElementById('root')
)
react-reduxアプリで変更が発生するたびに、mapStateToProps()が呼び出されます。 この関数では、reactコンポーネントに提供する必要がある状態を正確に指定します。
以下で説明するconnect()関数の助けを借りて、これらのアプリの状態を反応コンポーネントに接続しています。 Connect()は、コンポーネントをパラメーターとしてとる高次関数です。 特定の操作を実行し、最終的にエクスポートした正しいデータを含む新しいコンポーネントを返します。
mapStateToProps()の助けを借りて、これらのストア状態を反応コンポーネントの支柱として提供します。 このコードは、コンテナコンポーネントにラップできます。 動機は、データの取得、レンダリングの懸念、再利用性などの懸念を分離することです。
import { connect } from 'react-redux'
import Listing from '../components/listing/Listing'//react component
import makeApiCall from '../services/services'//component to make api call
const mapStateToProps = (state) => {
return {
items: state.items,
isLoading: state.isLoading
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: () => dispatch(makeApiCall())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Listing);
services.jsファイルでAPI呼び出しを行うコンポーネントの定義は次のとおりです-
import axios from 'axios'
import { itemsLoading, itemsFetchDataSuccess } from '../actions/actions'
export default function makeApiCall() {
return (dispatch) => {
dispatch(itemsLoading(true));
axios.get('http://api.tvmaze.com/shows')
.then((response) => {
if (response.status !== 200) {
throw Error(response.statusText);
}
dispatch(itemsLoading(false));
return response;
})
.then((response) => dispatch(itemsFetchDataSuccess(response.data)))
};
}
mapDispatchToProps()関数は、ディスパッチ関数をパラメーターとして受け取り、反応コンポーネントに渡すプレーンオブジェクトとしてコールバックプロパティを返します。
ここでは、反応リストコンポーネントのpropとしてfetchDataにアクセスできます。これは、API呼び出しを行うアクションをディスパッチします。 mapDispatchToProps()は、格納するアクションをディスパッチするために使用されます。 react-reduxでは、コンポーネントはストアに直接アクセスできません。 唯一の方法は、connect()を使用することです。
下の図を通して、react-reduxがどのように機能するかを理解しましょう-
*STORE* -すべてのアプリケーションの状態をJavaScriptオブジェクトとして保存します
*PROVIDER* -店舗を利用可能にする
*CONTAINER* -アプリの状態を取得し、コンポーネントの小道具として提供する
コンポーネント-ユーザーはビューコンポーネントを介して対話します
アクション-ストアの変更を引き起こします。アプリの状態を変更する場合と変更しない場合があります
*REDUCER* -アプリの状態を変更し、状態とアクションを受け入れ、更新された状態を返す唯一の方法。
ただし、Reduxは独立したライブラリであり、任意のUIレイヤーで使用できます。 React-reduxは、公式のRedux、reactとのUIバインディングです。 また、Reduxアプリの適切なリアクションを促進します。 React-reduxはパフォーマンスの最適化を内部的に実装しているため、コンポーネントの再レンダリングは必要な場合にのみ行われます。
要約すると、Reduxは最短かつ最速のコードを書くようには設計されていません。 予測可能な状態管理コンテナを提供することを目的としています。 特定の状態がいつ変化したか、またはデータがどこから来たかを理解するのに役立ちます。