原文：Redux Now Has Hooks. A Before and After Comparison

今天react-redux团队发布了7.1.0版本,react-redux新增了钩子!这里有一个快速的比较应该怎样改写你的组件。 首先,简要概述的新函数

• useSelector：通过一个函数让state作为一个入参然后返回一个value。用于从state中获取一个值。它可以作为mapStateToProps的替代
• useDispatch： 返回一个dispatch对象的引用，它可以作为mapDispatchToProps替代
• useStore ：返回store的实例。一般不推荐

旧的例子:一个搜索表单

一个示例组件包含stores查询和提交查询，我想使这个示例尽量简单,所以你可以想象一下,它的结果。

import React from 'react'
import { connect } from 'react-redux'
const defaultSearchBar = ({ query, updateQuery, handleSearch }) => {
  const handleSubmit = (e) => {
    e.preventDefault()
    handleSearch(query)
  }
  const handleChange = e => updateQuery(e.target.value)
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="search"
        value={query}
        onChange={handleChange}
      />
    </form>
  )
}
const mapStateToProps = state => ({
  query: state.query,
})
const mapDispatchToProps = dispatch => ({
  updateQuery: newQuery => dispatch({ type: 'UPDATE_QUERY', payload: newQuery }),
  handleSearch: newSearch => dispatch({ type: 'NEW_SEARCH', payload: newSearch }),
})
const connectedSearchBar = connect(
  mapStateToProps,
  mapDispatchToProps,
)(defaultSearchBar)

新的组件

在我们新的例子中,有一些不同之处:我们完全不使用了connect，mapStateToProps, mapDispatchToProps这三个函数，这意味着我们的组件不再直接接受props,现在,我们的形式是这样的:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
const hookedSearchBar = () => {
  const dispatch = useDispatch()
  const query = useSelector(state => state.query)
  const handleSubmit = (e) => {
    e.preventDefault()
    dispatch({ type: 'NEW_SEARCH', payload: query })
  }
  const handleChange = e => dispatch({ type: 'UPDATE_QUERY', payload: e.target.value })
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="search"
        value={query}
        onChange={handleChange}
      />
    </form>
  )
}

创建自己的hooks

如果你的代码组件之间频繁使用（我理解是频繁调用）,您可以创建一个hooks,将所有的功能结合在一起. 这里有个例子,我们单独把redux 特殊的部分形成自己的hooks

你应该使用开关吗?

能够创建上面的钩子是非常有趣的，但是我也担心,它可能会使代码难以测试。为测试这些组件已经危险。我不是推销的形式,但我希望这对你比较更容易对代码库做出明智的决定