Redux - 集成 React

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

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

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

提供者
连接

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

让我们看一下根 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是如何工作的 -

STORE - 将所有应用程序状态存储为 JavaScript 对象

PROVIDER - 使商店可用

CONTAINER - 获取应用程序状态并将其作为组件提供

COMPONENT - 用户通过视图组件进行交互

操作- 导致商店发生变化，它可能会也可能不会改变您的应用程序的状态

REDUCER - 更改应用程序状态、接受状态和操作并返回更新状态的唯一方法。

然而，Redux 是一个独立的库，可以与任何 UI 层一起使用。React-redux是官方的Redux，UI与react绑定。此外，它鼓励良好的 React Redux 应用程序结构。React-redux 内部实现了性能优化，使得组件只在需要的时候才会重新渲染。

总而言之，Redux 并不是为了编写最短、最快的代码而设计的。它的目的是提供一个可预测的状态管理容器。它帮助我们了解某个状态何时发生变化，或者数据来自哪里。