【React】useReducer + useContext實作redux簡易版

直接上代碼 ，目錄結構和上一篇useReducer相同

App.js

import React,{useReducer} from 'react'
import './App.css'
import Navbar from './components/Navbar'
import Messages from './components/Messages'
import {myReducer} from './reducer'
export const AppContext = React.createContext({});

function App() {
  const [count, dispatch] = useReducer(myReducer, 10);
  return (
    <AppContext.Provider value={{
      username: 'xxxxxxxxxx',
      count:count
    }}>
      <div className="App">
        <Navbar />
        <Messages p={{count,dispatch}}/>
      </div>
    </AppContext.Provider>
  )
}

export default App

           

Message.jsx

import React, { useContext, useReducer } from 'react'

function Messages(props) {
  const {p}=props
  const {count,dispatch}=p
  return (
    <div className="App">
    <button onClick={() => dispatch('increment')}>
      Increment
    </button>
    <button onClick={() => dispatch('decrement')}>
      Decrement
    </button>
    <p>Count: {count}</p>
  </div>
  )
}

export default Messages

           

reducer函數

const myReducer = (state, action) => {
    switch (action) {
        case ('increment'):
            return state + 1;
        case ('decrement'):
            return state - 1
        default:
            return state;
    }
}
export {
    myReducer
}
           

思路

• 建立全局的Context
• 建立全局的Reducer
• 将全局useReducer傳回的state和dispatch傳下去，也可以放到全局context中
• 取值，狀态互通