昨天建立了 redux 的三元素 action、reducer 與 store，也將它們用 provider 包住會用到 state 的元件，今天來試著在元件中取用存放在 store 的 state 吧！

以往使用 class component，要取用到 redux 管理的 state 是比較麻煩的事，例如：

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

如果 Link 這個 component 需要使用 redux 的 state，首先需要先透過 connect function 與 redux 做連接，再實作 mapStateToProps 與 mapDispatchToProps 兩個 function，把 state 與 dispatch 與元件的 props 做綁定，實在是非常麻煩啊...

但是！

Hooks 又再次造福我們了

直接實作看看吧，還記得我們有一個 form 的 component 跟一個 counter 的 component 嗎？
用 form component 實作吧，回到 Ｆorm.js 中：

import React,{ useState, useEffect } from 'react'
import { withRouter } from "react-router";
import { useDispatch, useSelector } from 'react-redux';
import { changeTheme } from '../actions/themeActions';

const Form = (props) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const dispatch = useDispatch();
    const darkTheme = useSelector(state => state.darkTheme);

    useEffect(() => {
        if(darkTheme) {
            document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
        }else{
            document.body.style.backgroundColor = "white";
        }
    },[darkTheme]);

    const handleSubmit = (e) => {
        e.preventDefault();
        props.setFormDone(true);
        setEmail('');
        setPassword('');
        props.history.push('/counter');
    }


    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input name="email" type="text" onChange={(e) => setEmail(e.target.value)} value={email} />
                <input name="password" type="password" onChange={(e) => setPassword(e.target.value)} value={password} />
                <input type="submit" value="submit" />
            </form>
            {props.formDone ? "成功填寫表單" : "表單未完成"}
            <button onClick={() =>  dispatch(changeTheme())}>change theme</button>
        </div>
    )
}

export default withRouter(Form);

關鍵在於從 react-redux 中引入的 useSelector 與 useDispatch，useSelector 讓我們可以精準的從 store 中抓到我們要使用的 state，useDispatch 則讓我們可以使用 dispatch ，將 action 派發出去。

const dispatch = useDispatch();
const darkTheme = useSelector(state => state.darkTheme);

透過這兩行拿到了 dispatch 函式與 store 中的 darkTheme state（預設值是false）

useEffect(() => {
    if(darkTheme) {
        document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
    }else{
        document.body.style.backgroundColor = "white";
    }
},[darkTheme]);

再透過 useEffect，當 darkTheme state 改變時，去判斷如果 darkTheme 是 true，就將背景顏色改深色，如果是 false 就改成白色。

最後建立一個按鈕，並在 onClick 時觸發 dispatch function，參數則放寫好的 action creator。

<button onClick={() =>  dispatch(changeTheme())}>change theme</button>

這樣就可以透過點選按鈕切換 theme 囉，每個 component 也可以共用 state ，不用每個元件都建立自己的 state 去管理或是經過好幾層以 props 的形式傳下去，簡單的範例，有沒有感受到 redux 的強大跟 state management 的重要性呢？