Redux集成React – Redux教程

上一章Redux教程请查看:Redux测试

在前几章中,我们学习了什么是Redux以及它是如何工作的,现在让我们查看视图部分与Redux的集成,你可以向Redux添加任何视图层,我们还将讨论react库和Redux。

假设不同的react组件需要以不同的方式显示相同的数据,而不需要将其作为从顶级组件到底层的所有组件的支撑。理想的做法是将其储存在react组件之外,因为它有助于更快的数据检索,因为你不需要将数据一直传递到不同的组件。

让我们讨论一下Redux是如何实现的,Redux提供了react- Redux包,可以将react组件绑定到以下两个实用程序

  • 提供者Provider
  • 连接Connect

Provider使存储对应用程序的其余部分可用,Connect函数帮助react组件连接到存储,响应存储状态中发生的每个更改。

让我们看一下root
index.js文件,它创建了store并使用了一个提供程序,使储存能够在一个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(),在这个函数中,我们精确地指定需要提供给react组件的状态。

在connect()函数的帮助下,我们将这些应用的状态连接到react组件,Connect()是一个以组件为参数的高阶函数,它执行某些操作并返回一个新组件,其中包含我们最终导出的正确数据。

在mapStateToProps()的帮助下,我们将这些存储状态作为道具提供给react组件。此代码可以包装在容器组件中,这样做的动机是将数据获取、呈现和可重用性等关注点分离开来。

import { connect } from 'react-redux'
import Listing from '../components/listing/Listing' //react组件
import makeApiCall from '../services/services' //组件进行api调用

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作为你的react列表组件中的一个道具来访问,该组件将调度一个动作来进行API调用。mapDispatchToProps()用于调度要存储的操作。在react-redux中,组件不能直接访问存储,惟一的方法是使用connect()。

让我们通过下面的图表来了解react-redux的工作流程

react-redux工作流程
  • 储存 – 将所有应用程序状态存储为JavaScript对象
  • 提供商provider——使储存可用
  • 容器 – 获取应用程序状态并将其作为组件的道具提供
  • 组件 – 组件用户通过视图组件进行交互
  • 动作 – 导致储存的变化,它可能会或不会改变你的应用程序的状态
  • Reducer – 唯一的方法来改变应用程序的状态,接受状态和动作,并返回更新后的状态。

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

综上所述,Redux并不是为了编写最短和最快的代码而设计的,它的目的是提供一个可预测的状态管理容器,它帮助我们了解什么时候某个状态发生了变化,或者数据来自何处。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?