Redux教程:集成React

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

让我们说一下,如果各种反应组件需要以不同的方式显示相同的数据,而不是将其作为从顶层组件到下层的所有组件的道具传递。将其存储在反应组件之外是理想的。因为它有助于更​​快地检索数据,因为您无需将数据一直传递到不同的组件。

让我们讨论一下Redux是如何实现的。Redux提供了react-redux包来绑定react组件和两个工具,如下所示:

  • Provider
  • 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()函数接收调度函数作为参数,并以传递给react组件的纯对象形式返回回调道具。

在这里,您可以在反应列表组件中作为道具访问fetchData,该组件调度一个动作以进行API调用。mapDispatchToProps()用于调度要存储的操作。在react-redux中,组件无法直接访问存储。唯一的方法是使用connect()。

让我们通过下图了解react-redux的工作方式:

Redux教程:集成React

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

PROVIDER提供商-使现有门店

CONTAINER容器-获取应用状态并作为组件的道具提供

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

ACTIONS措施-导致商店更改,它可能会或可能不会更改您的应用程序的状态

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

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

综上所述,Redux并非旨在编写最短和最快的代码。旨在提供可预测的状态管理容器。它可以帮助我们了解特定状态何时更改或数据来自何处。

作者:terry,如若转载,请注明出处:https://www.web176.com/redux/2218.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年3月31日 下午4:41
下一篇 2021年3月31日 下午4:49

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注