简介
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()的方式来调用。
参考资料
- React Redux Official Docs
- Store in Redux
- Action in Redux
- the Redux docs page on Computing Derived Data
- Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance
- Using the React Redux Bindings
- Higher Order Components in Depth
- Redux docs: Motivation
- Redux docs: FAQ - When should I use Redux?
- You Might Not Need Redux
- Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent
