Redux Hooks使用方式

BB is nothing，show me the code。

新公司學習階段，代碼大多數是使用redux來作狀態管理，而且使用Hooks。雖然以前瞭解，可是沒有在實際項目中使用過。寫一個小的Demo 供你們參考。

React Redux在19年6月11日發不了的7.1版中提供了對Hooks的支持（以前大可能是使用一個redux-react-hook來作）。這咱們就能夠不使用高階HOC的方式了。

具體什麼是Hook我就不介紹了，不懂的請自行查看react官方文檔。

react-redux 提供了兩個Hook用來替代connect。

useSelector

useSelector是鏈接mapStateToProps的替代方法。向其傳遞了一個函數，該函數使用Redux的存儲狀態並返回所需的狀態。

useDispatch

useDispatch替換connect的mapDispatchToProps。它所作的只是返回store的dispatch方法，所以咱們能夠手動調用dispatch。

直接一個對比的demo更明顯

Connect 組件

import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";
 
export const Demo = ({ count, addCount }) => {
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={addCount}>Count</button>
    </div>
  );
};
 
const mapStateToProps = state => ({
  count: state.counter.count
});
const mapDispatchToProps = { addCount };

// content 連接
export default connect(mapStateToProps, mapDispatchToProps)(Demo);複製代碼

Hooks組件

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addCount } from './store/counter/actions'

export const Demo = () => {
  const count = useSelector(state => state.counter.count)
  const dispatch = useDispatch()

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(addCount())}>Count</button>
    </div>
  )
}複製代碼

可見Hooks的寫法仍是特別簡潔的。