Redux 技巧之更方便地从 Store 中获取 state

在使用 React + Redux 的项目中，从 Store 中获取 state 一般采用下面的方式：

import React from 'react'
import { connect } from 'react-redux'

let App = ({ firstName, lastName }) => (
  <div>{ firstName } { lastName }</div>
)

App = connect(state => ({
  firstName: state.firstName,
  lastName: state.lastName,
}))(App)

上面例子中，我们从 Store 获取到了 firstName 和 lastName 两个字段的值。假如考虑需要获取更多字段的情况：

App = connect(state => ({
  firstName: state.firstName,
  lastName: state.lastName,
  birthday: state.birthday,
  gender: state.gender,
  address: state.address,
  postcode: state.postcode,
  country: state.country,
  // ...
}))(App)

代码显得很罗嗦，而且相对而言变得不容易维护（曾不止一次碰到过字段名给拼错的情况，结果又得花时间去查找问题）。

lodash 提供了一个叫做 pick 的方法，它的用法如下：

import pick from 'lodash/pick'

const object = { 
  a: 42, 
  b: true, 
  foo: 'bar',
}
pick(object, [ 'a', 'b' ]) // => { a: 42, b: true }

pick 的作用是，从一个对象里“取出”指定的键名的值。恰好可以把它用在这个场景里：

App = connect(state => pick(state, [
  'firstName',
  'lastName',
  'birthday',
  'gender',
  'address',
  'postcode',
  'country',
  // ...
])(App)

这样看过去代码瞬间变得干净了很多……

还可以让它变得更简洁：

import pick from 'lodash/fp/pick' // 注意这里，用的是 FP 版本的 pick

App = connect(pick([
  'firstName',
  'lastName',
  'birthday',
  'gender',
  'address',
  'postcode',
  'country',
  // ...
])(App)

FP 版本的 pick 采用 Pointfree 风格，被处理的数据作为最后一个变量传入。由于同时是一个柯里化函数（Curried Function），我们只传入部分参数，剩下的参数留待真正调用时传入，这样就不用再声明一个函数了。