在使用 React + Redux 的項(xiàng)目中，從 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 兩個(gè)字段的值。假如考慮需要獲取更多字段的情況：

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)

代碼顯得很羅嗦，而且相對(duì)而言變得不容易維護(hù)（曾不止一次碰到過(guò)字段名給拼錯(cuò)的情況，結(jié)果又得花時(shí)間去查找問(wèn)題）。

lodash 提供了一個(gè)叫做 pick 的方法，它的用法如下：

import pick from 'lodash/pick'

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

pick 的作用是，從一個(gè)對(duì)象里“取出”指定的鍵名的值。恰好可以把它用在這個(gè)場(chǎng)景里：

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

這樣看過(guò)去代碼瞬間變得干凈了很多……

還可以讓它變得更簡(jiǎn)潔：

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

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

FP 版本的 pick 采用 Pointfree 風(fēng)格，被處理的數(shù)據(jù)作為最后一個(gè)變量傳入。由于同時(shí)是一個(gè)柯里化函數(shù)（Curried Function），我們只傳入部分參數(shù)，剩下的參數(shù)留待真正調(diào)用時(shí)傳入，這樣就不用再聲明一個(gè)函數(shù)了。