Redux集成React – Redux教程 _redux集成react

上一章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);

【Redux集成React – Redux教程】在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并不是为了编写最短和最快的代码而设计的，它的目的是提供一个可预测的状态管理容器，它帮助我们了解什么时候某个状态发生了变化，或者数据来自何处。