React Hooks - useReducer和useContext实现组件之间的数据共享

Ⅰ- 壹 - 简介

• useReducer 这个 Hooks 在使用上几乎跟 Redux/React-Redux 一模一样，唯一缺少的就是无法使用 redux 提供的中间件。
• useContext 是 React 帮你封装好的，用来处理多层级传递数据的方式

两种结合使用可以实现 Redux/React-Redux 跨组件之间的数据共享

Ⅱ - 贰 - 使用

App.jsx:父组件

import React, { useReducer,createContext}from 'react'
import { defaultState, reducer } from './reducer' //

import Dome from './Dome';

//可以抽离出去
export const Ctx=createContext()
export default function App(props) {

  const [state, dispatch] = useReducer(reducer, defaultState)

  return (

    <>
      {state.conuste}
      <button onClick={() => dispatch({ ...state,type: "SET_ISSHOW", conuste: state.conuste+1 })}>点就完了</button>
      <h1>其他组件</h1>
      <Ctx.Provider value={{state,dispatch}}>
        <Dome></Dome>
      </Ctx.Provider>
    
    </>
  )
}

reducer.js: 共享的数据

const defaultState = {

  conuste: 0
}

const reducer = (state = defaultState, action) => {
  console.log(action);
  switch (action.type) {
    case 'SET_ISSHOW':
      console.log(state);
      return {
        ...state,
        conuste: action.conuste
      }

    default:
      return state
  }
}

export {
  defaultState, reducer
}

Dome.jsx:其他组件共享数据

import React, { useReducer,useContext}from 'react'
import { Ctx} from './useReducer'


export default function Dome() {


  const { state: { conuste}} = useContext(Ctx)

  return (

    <>
      <h1>{conuste}</h1>

    </>
  )
}