Redux - 整合React

在之前的章節中，我們學習了什麼是Redux以及它的工作原理。現在讓我們檢查一下檢視部分與Redux的整合。您可以將任何檢視層新增到Redux。我們還將討論React庫和Redux。

假設各種React元件需要以不同的方式顯示相同的資料，而無需將其作為prop從頂級元件一直傳遞到最底層元件。將其儲存在React元件之外是理想的選擇。因為它有助於更快地檢索資料，因為您無需將資料一直傳遞到不同的元件。

讓我們討論一下如何使用Redux實現這一點。Redux 提供了 react-redux 包來繫結 React 元件，並使用如下所示的兩個實用程式：

• Provider
• Connect

Provider 使 store 可用於應用程式的其餘部分。Connect 函式幫助 React 元件連線到 store，響應 store 狀態中發生的每個更改。

讓我們看一下建立 store 並使用 provider 將 store 啟用到 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() 函式，我們將應用程式的狀態連線到 React 元件。Connect() 是一個高階函式，它將元件作為引數。它執行某些操作並返回一個包含正確資料的新的元件，我們最終匯出了這個元件。

藉助 mapStateToProps()，我們將這些 store 狀態作為 prop 提供給我們的 React 元件。此程式碼可以包裝在一個容器元件中。其目的是為了分離關注點，例如資料獲取、渲染關注點和可重用性。

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() 函式接收 dispatch 函式作為引數，並返回您傳遞給 React 元件的普通物件作為回撥 prop。

在這裡，您可以訪問 fetchData 作為 React 列表元件中的 prop，它分派一個 action 來進行 API 呼叫。mapDispatchToProps() 用於向 store 分派 action。在 react-redux 中，元件不能直接訪問 store。唯一的方法是使用 connect()。

讓我們透過下圖瞭解 react-redux 的工作原理：

STORE - 將所有應用程式狀態儲存為 JavaScript 物件

PROVIDER - 使 store 可用

CONTAINER - 獲取應用程式狀態並將其作為 prop 提供給元件

COMPONENT - 使用者透過檢視元件進行互動

ACTIONS - 導致 store 發生更改，它可能更改也可能不更改應用程式的狀態

REDUCER - 更改應用程式狀態的唯一方法，接受狀態和 action，並返回更新後的狀態。

但是，Redux 是一個獨立的庫，可以與任何 UI 層一起使用。React-redux 是 Redux 的官方 React UI 繫結。此外，它鼓勵良好的 React Redux 應用程式結構。React-redux 內部實現了效能最佳化，以便只有在需要時才重新渲染元件。

總而言之，Redux 的設計目的不是編寫最短、最快的程式碼。它旨在提供一個可預測的狀態管理容器。它幫助我們瞭解何時更改了特定狀態，或者資料來自哪裡。