在使用 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 風格,被處理的數(shù)據(jù)作為最后一個變量傳入肌蜻。由于同時是一個柯里化函數(shù)(Curried Function)互墓,我們只傳入部分參數(shù),剩下的參數(shù)留待真正調(diào)用時傳入蒋搜,這樣就不用再聲明一個函數(shù)了篡撵。