优雅地乱玩 Redux-2-Usage with React

Installation

Some Conceptions
- Presentational and container components
Connect with React
- connect
- connect
  - mapStateToProps
  - mapDispatchToProps
Presentational Component
Project Structure

Installation

代码语言：javascript复制

npm install --save react-redux

Some Conceptions

Presentational and container components

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

是个 Component
这个鬼 Component 仅仅渲染 HTMl

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

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

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

CC应该负责和 Redux 的各种 Dispatcher

Connect with React

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

connect

首先看一个例子:

代码语言：javascript复制

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

格式:

代码语言：javascript复制

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

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

mapStateToProps

格式:

代码语言：javascript复制

mapStateToProps(state, [ownProps]): stateProps (Function)

根据当前的state以及ownProps结果返回一个 obj, 并且这个 obj 会被 merge 到props里面

这个函数会跟redux注册, 类似于绑定, 一旦store里面的状态被更新, 那么这个函数将被调用
- 如果不想在这个时候被监听，那么直接传一个null或者undefined
第二个参数就是对应组件自身的props
- 另外当传递的第二个参数的时候, 如果组件自身的props被更新了, 这个函数也会被重新调用, 并且这个比较是一种浅层的比较

比如: Link 是个 component, 这个函数的返回值决定当前 Link 是否应该显示:

代码语言：javascript复制

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}


const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

mapDispatchToProps

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

格式:

代码语言：javascript复制

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

可以传函数或者是一个对象
- 如果传一个对象, 那么里面每个 Key 多一个对应一个Redux action creator
  - 即将实际每个Action用dispatch()包围起来
- 如果传的是一个单独的函数, 那么dispatch会被当做第一个参数
如果没有提供这个值, 那么就会将dispatch直接用到这个 component 里面(也就是不干涉 dispatch 的细节)

比如下面, 我们给一个Link的onClick事件绑定一个dispatch

FilterLink.js:

代码语言：javascript复制

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可以这么写:

代码语言：javascript复制

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 等)

javascript react redux

0 人点赞