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

拼搏现实的明天。 2022-12-15 12:59 267阅读 0赞

# Ⅰ- 壹 - 简介 #

*  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>
    
        </>
      )
    }