Redux - 集成 React

在前面的章节中，我们了解了 Redux 是什么以及它是如何工作的。现在让我们检查一下视图部分与 Redux 的集成。您可以将任何视图层添加到 Redux。我们还将讨论 React 库和 Redux。

假设不同的 React 组件需要以不同的方式显示相同的数据，而不将其作为 props 传递给从顶级组件到下层组件的所有组件。将其存储在反应组件之外是理想的选择。因为它有助于更快地检索数据，因为您无需将数据一直传递到不同的组件。

让我们讨论一下 Redux 如何实现这一点。 Redux 提供了 React-Redux 包来将 React 组件与两个实用程序绑定，如下所示 −

Provider
Connect

Provider 使应用程序的其余部分可以使用该存储。 Connect 函数帮助反应组件连接到 store，响应 store 状态中发生的每个变化。

让我们看一下 root index.js 文件，该文件创建存储并使用一个提供程序，该提供程序使该存储能够存储到react-redux应用程序中的应用程序的其余部分。

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()。在此函数中，我们准确指定需要向反应组件提供哪种状态。

借助下面解释的 connect() 函数，我们将这些应用程序的状态连接到反应组件。 Connect() 是一个以组件为参数的高阶函数。它执行某些操作并返回一个带有我们最终导出的正确数据的新组件。

在mapStateToProps()的帮助下，我们将这些存储状态作为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() 函数接收调度函数作为参数，并将回调 props 作为传递给 React 组件的普通对象返回。

在这里，您可以将 fetchData 作为 React 列表组件中的 prop 进行访问，该组件会调度一个操作来进行 API 调用。 mapDispatchToProps() 用于调度要存储的操作。在react-redux中，组件无法直接访问store。唯一的方法是使用 connect()。

让我们通过下图了解一下react-redux是如何工作的 −