30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

當資料傳來傳去很頭痛，要將資料傳到地球的另一端時，可能要三百年

我們可以利用 Context 來簡化傳來傳去的的問題

Context 可以想像是整個 TREE 外面的一個儲存庫(store)，不經過每一個元件，可以直接取得

createContext

首先讓我們建立一個”空間”，裡面存放了使用者登入與否的資訊

import React from "react"

const AuthContext = React.createContext({
  isLoggedIn: false,
})

export default AuthContext

再來設定”供應來源以及誰要接收”

• Provider
• Consumer

const App = () => {
  return (
    <AuthContext.Provider
      value=
      //由於使用了consumer，要在這邊設定default value
    >
      <MainHeader />
    </AuthContext.Provider>
  )
}

const MainHeader = () => {
  return <AuthContext.consumer>
  {ctx => {
    return (
      <nav>
      {ctx.isLoggedIn && ...}
      {!ctx.isLoggedIn && ...}
    </nav>
    )
  }}
  </AuthContext.consumer>
}

//OR

const MainHeader = () => {
  const ctx = useContext(AuthContext)

  return (
    <nav>
      {ctx.isLoggedIn && ...}
      {!ctx.isLoggedIn && ...}
    </nav>
  )
}

這樣就不用擔心傳來傳去的問題了

可以直接撈到想要的資料

那原本的 store 要拿來做什麼呢

就留到下一篇ㄅ