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がどのように機能するかを理解しましょう-

React Redux Work

*STORE* -すべてのアプリケーションの状態をJavaScriptオブジェクトとして保存します

*PROVIDER* -店舗を利用可能にする

*CONTAINER* -アプリの状態を取得し、コンポーネントの小道具として提供する

コンポーネント-ユーザーはビューコンポーネントを介して対話します

アクション-ストアの変更を引き起こします。アプリの状態を変更する場合と変更しない場合があります

*REDUCER* -アプリの状態を変更し、状態とアクションを受け入れ、更新された状態を返す唯一の方法。

ただし、Reduxは独立したライブラリであり、任意のUIレイヤーで使用できます。 React-reduxは、公式のRedux、reactとのUIバインディングです。また、Reduxアプリの適切なリアクションを促進します。 React-reduxはパフォーマンスの最適化を内部的に実装しているため、コンポーネントの再レンダリングは必要な場合にのみ行われます。

要約すると、Reduxは最短かつ最速のコードを書くようには設計されていません。予測可能な状態管理コンテナを提供することを目的としています。特定の状態がいつ変化したか、またはデータがどこから来たかを理解するのに役立ちます。

Redux-integrate-react

Redux-Reactの統合