react 使用 useContext 實現跨組件存取狀態

我們在傳狀態到子組件時最常用的就是props，但是如果我們的組件非常多層，不可能一層一層props傳下去，這時候就可以使用redux或是react useContext hook來實現。今天就是要來介紹：useContext。

使用的方式就是在巢狀組件中的最頂層創建Context存放所有狀態，然後在他之下的所有組件（不一定要直屬下一層）都可以存取。

先假設組件關係：

--App.js
----TodoList.js
------TodoItem.js

<App>
  <TodoList>
    <TodoItem />
    <TodoItem />
  </TodoList>
</App>

創建Context

import React, {  createContext } from 'react';
export const AppContext = createContext()

<AppContext.Provider value={{...}}>
  <App>
    //...
  </App>
</AppContext.Provider>

在value中可以放入你想統一在最高層管理的狀態，可以是一般常數、狀態、方法甚至redux資料的等：

const appData = useSelector(state => state.app.data);
const { username } = useSelector(state => state.user);
const [loading, setLoading] = useState(false);
const handleGetUsers = () => { //... };

const appContextValue = {
  appData,
  username,
  loading,
  handleGetUsers
}

將 value 放到Provider中：

<AppContext.Provider value={appContextValue}>
  <App>
    //...
  </App>
</AppContext.Provider>

跨組件使用Context

我們如果要在TodoList使用這些狀態，其實可以直接props進去就好，但是TodoItem要取用狀態，就可以使用到Context。

import React, { useContext } from 'react';
import { AppContext } from '../App';


const TodoItem = () => {
  const { username } = useContext(AppContext)
  return <div>{ username }</div>
}

export default TodoItem;

這樣我們就不用另外安裝redux，也不用從App一路props到最底層組件囉。