优雅地乱玩Redux: Usage with React

原创文，最初发布于 szhshp的第三边境研究所 , 转载请注明

Installation

npm install --save react-redux

Some Conceptions

Presentational and container components

Presentational Component(下称PC)有这么几个特性:

1. 是个Component
2. 这个鬼Component仅仅渲染HTMl

PC不应该和Redux的Store进行任何交互

Container Components(下称CC)有这么几个特性:

1. 给PC传递Props, 提供数据
2. 提供一些action, 如果PC需要任何交互操作的话，那么就应该调用CC里面全被你刷屏后天晚上我才要严肃的函数, 这个函数一般通过props传递给了PC

CC应该负责和Redux的各种Dispatcher

Connect with React

今天我确定哪些东西是PC, 然后确定哪些东西是CC
PC可以先写起来
CC的话redux推荐使用他们API里面的connect()函数来自动进行生成

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

格式:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(components)

将components对应的组件和Redux的store绑定, 并且需要提供几个重要函数. (见下文)

mapStateToProps

格式:

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)

mapDispatchToProps

这里面会将不同的Action的实现和Dispatch()动作连接起来

格式:

mapDispatchToProps(dispatch, [ownProps]): dispatchProps (Object or Function)

• 可以传函数或者是一个对象
  • 如果传一个对象, 那么里面每个Key多一个对应一个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)

Presentational Component

随后就可以在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

Project Structure

推荐的项目架构:

粗体代表是文件夹

• src
• index.html
• actions
• components
• reducers
• containers
• public
• 其他文件(package.json, readme.md等)