npm install --save react-redux
Presentational Component
(下称 PC)有这么几个特性:
PC
不应该和 Redux 的 Store 进行任何交互
Container Components
(下称 CC)有这么几个特性:
PC
传递 Props, 提供数据PC
需要任何交互操作的话,那么就应该调用CC
里面全被你刷屏后天晚上我才要严肃的函数, 这个函数一般通过props
传递给了PC
CC
应该负责和 Redux 的各种 Dispatcher
今天我确定哪些东西是PC
, 然后确定哪些东西是CC
PC 可以先写起来 CC 的话 redux 推荐使用他们 API 里面的connect()
函数来自动进行生成
首先看一个例子:
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
这是一个CC
, 其中包含了一个PC: TodoList
在传统 React App 中,
TodoList
里面仅仅对传进去的props
进行渲染 connect()函数做的事情是: 将State
已经Dispatcher
的一系列的处理结果转换成props
并且传给TodoList
格式:
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(components)
将components
对应的组件和 Redux 的 store 绑定, 并且需要提供几个重要函数. (见下文)
格式:
mapStateToProps(state, [ownProps]): stateProps (Function)
根据当前的
state
以及ownProps
结果返回一个 obj, 并且这个 obj 会被 merge 到props
里面
redux
注册, 类似于绑定, 一旦store
里面的状态被更新, 那么这个函数将被调用 null
或者undefined
props
props
被更新了, 这个函数也会被重新调用, 并且这个比较是一种浅层的比较
比如: Link 是个 component, 这个函数的返回值决定当前 Link 是否应该显示:
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
这里面会将不同的
Action 的实现
和Dispatch()
动作连接起来
格式:
mapDispatchToProps(dispatch, [ownProps]): dispatchProps (Object or Function)
Redux action creator
Action
用dispatch()
包围起来dispatch
会被当做第一个参数dispatch
直接用到这个 component 里面(也就是不干涉 dispatch 的细节)比如下面, 我们给一个Link
的onClick
事件绑定一个dispatch
FilterLink.js:
const setVisibilityFilter = filter => ({
type: 'SET_VISIBILITY_FILTER',
filter
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(Link)
随后就可以在PC
里面获得传进去的这两个参数里面的事件
比如上面放到FilterLink.js
里面的Link.js
可以这么写:
import React from 'react'
import PropTypes from 'prop-types'
const Link = ({ active, onClick, children }) => (
<button
onClick={onClick}
disabled={active}
>
{children}
</button>
)
Link.propTypes = {
active: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired
}
export default Link
上方active, onClick
都来自 props 里面的数据 children
是这个 component 自身的子 dom
推荐的项目架构:
粗体代表是文件夹