React 上下文 API- 我如何从 useEffect 挂钩中分派一个动作？

Question

In this project I'm using React.createContext() methode to manage the state. I can access to the state data by importing the Context.Consumer and using this consumer in the return methode of the class component(or functional component). See thie exemple bellow :

function App(){

  return(
    <Consumer>
      {value=>{
                const {basket} = value;
                return <p> { basket.length() } </p>
            }
      }
    </Consumer>
  )
}

问题是我想从 useEffect hook 而不是组件 return

这是我想做的事情：

function App() {

    useEffect(() => {
        auth.onAuthStateChanged(authUser => {
                if(authUser){
                    dispatch({ //I need to use dispatch methode here!!
                        type : 'SET_USER',
                        payload : authUser
                    })
                }
                else{
                    dispatch({ //I need to use dispatch methode here!!
                        type : 'SET_USER',
                        payload : null
                    })
                }
            })      

    }, [])
  
  return(...)
  
  }

StateProvider.js :

import React, { Component } from 'react';
const  Context = React.createContext();

// 1. Selector
export const getSubtotal = (basket)=> basket?.reduce((amount,item)=> item.price + amount ,0);

// 2. Reducer
const reducer = (state,action)=>{
    switch(action.type){
        case 'ADD_TO_BASKET' :
            return{
                basket : [action.payload, ...state.basket],
            };
        case 'DELETE_FROM_BASKET' :
            const index = state.basket.findIndex(item=>item.id === action.payload)
            let basketCopie = [...state.basket]
            basketCopie.splice(index,1)
            return{
                basket : basketCopie
            };
        case 'SET_USER' :
            return{
                user : action.payload
            };
        default :
            return state
    }
}

// 3. Provider Classe
export class Provider extends Component {
    state = {
        basket : [], 
        user : null,
        dispatch : action=> this.setState(state=> reducer(state,action))
    }
    render() {
        return (
            <Context.Provider value={this.state} > {/* the value change after any reducer call*/}
                {this.props.children}
            </Context.Provider>
        );
    }
}

// 4. Consumer
export const Consumer = Context.Consumer;

Answer 1

好的，我知道这不是一个完整的答案，但我找到了一个我认为会对你有很大帮助的页面

context api with hooks

它和你一起一步步走，对我帮助很大

React 上下文 API- 我如何从 useEffect 挂钩中分派一个动作？

React context API- How i can dispatch an action from the useEffect hook?

reactjs

dispatch

reducers

consumer

react-context