react-redux的实现原理

简介

React Redux框架可以用来对React Native进行数据流管理。Redux是一个用于UI布局框架的标准库。Redux的概念是通过UI binding来将Redux和React绑定到一起，这样可以避免UI 部分和store直接交互。

UI binding

从组件布局来讲，当我们在构建一个大型组件，且内部每个小模块分工不同时，合理的设计方式是将各个部分按照功能进行拆分，在外部提供一个公共“容器”，用于处理数据，展示层只负责显示接收到的参数。
而Redux的connect函数就是提供了这种容器功能，用于管理数据，我们的React组件只需要接收和显示参数即可。

使用手册

React Redux有几个基本概念：Store、Action、connect。

React Redux结构图：

 

Redux 使用说明

使用action而不是直接编写function的优点在于，组件只需要告知外部需要做什么，只关心如何触发动作，而不必关心触发了什么动作。

Store

Store是用来维持所有state树的一个对象，一个项目只有一个单一的store。Redux使用单向数据流的管理方式，改变store内state的唯一途径是对它dispatch一个action。
通过<Provider />来包裹项目布局。

import App from './App'

import { Provider } from 'react-redux'
import store from './redux/store'

...
render(
  <Provider store={store}>
    <App />
  </Provider>
  ...
)

 

Connect

connect是Redux提供的用于读取store内数据的函数，并且在store更新时获取最新的数据。

connect具有以下功能：

• 自动处理对store的订阅，可以进行方法分派。
• 渲染时机优化：自动实现了shouldComponentUpdate，并且只会在订阅的信息更新时才出发re-render。
• 隔绝了数据订阅者和store直接的不必要联系，组件不需要关心store的细节，只需知道自己订阅的数据格式即可。
• connect会将订阅的数据和需要派发的函数，以props的形式注入到组件中。

connect函数提供了两个可选参数：

• mapStateToProps：每次state变化时都会被调用，接受全局state，需要返回当前组件需要的数据。
• mapDispatchToProps：该参数可以是函数或者对象。
  • 函数。只在组件创建时调用，接收dispatch作为参数，返回一个包含一个或多个参数的对象，用于使用dispatch来分派action。
  • 对象。包含多个action创建器的对象。每个action都会转换成自动分派的函数。

 

const mapStateToProps = (state, ownProps) => ({
  // ... computed data from state and optionally ownProps
})

const mapDispatchToProps = {
  // ... normally is an object full of action creators
}

// `connect` returns a new function that accepts the component to wrap, and that function returns the connected, wrapper component, We normally do both in one step, like this:
connect(
  mapStateToProps,
  mapDispatchToProps
)(Component)

 

组件connect之后，所连接的action会以Propsd的方式添加到组件内。调用方式与属性内声明的一直，可以使用() => { func() }或者this.props.func()的方式来调用。