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的工作流程

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

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

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