iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
0

昨天建立了 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 實作吧,回到 Form.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>

https://ithelp.ithome.com.tw/upload/images/20190922/2011327746VEEcjLMz.png

https://ithelp.ithome.com.tw/upload/images/20190922/201132771jHdGR7ST2.png

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


上一篇
【Day 17】Redux 實戰演練
下一篇
【Day 19】可能不需要 redux - useReducer
系列文
React.js 從 【0】 到【1】推坑計畫 30

尚未有邦友留言

立即登入留言