我尝试将 React.createContext Api 注入 Thunk withExtraArgument 但不明白

Question

I'm new to React learning and now I have this Redux Thunk that I need to inject this firebase Context into.

The FirebaseContext Context:
(It also create an withFirebase that I use with Rect.Componets.)

    import React from 'react';
    
    const FirebaseContext = React.createContext(null);
    
    export const withFirebase = Component => props => (
        <FirebaseContext.Consumer>{firebase => <Component {...props} firebase={firebase} />}</FirebaseContext.Consumer>
    );

export default FirebaseContext;

This is how the FirebaseContext.Provider is assigned:

import Firebase, { FirebaseContext } from './firebase';
import store from './redux/store';

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <Provider store={store}>
            <App />
        </Provider>
    </FirebaseContext.Provider>,

    document.getElementById('root'),
);

And creating the Redux store I inject it like this standars procedure:

thunk.withExtraArgument(FirebaseContext),

And here is my Redux Thunk and when running this the Thunk is called but the FirebaseContext must be the value={new Firebase()} value but don't understand how to do that I have search for hours and also tried using the withFirebase to wrap the Thunk with but Thunk did not like that!

function doSomeWork() {
    return (dispatch, FirebaseContext) => {
        function work() {
            const firebase = FirebaseContext; // HERE IS THE PROBLEM 
            const userRef = firebase.userDoc(firebase.auth.currentUser.uid);
            dispatch(doSomeWorkStart());
            .....
        }
        return work;
    };
}

How can I pass the "value" that is the new Firebase() into my Thunk??

Answer 1

Edit:

Option 1:

I think instead of trying to pass the FirebaseContext down to your thunk, you should instead just pass the Firebase object itself. You can't use context inside of thunk, so either you will need to pass the context value as an argument to your thunk from the component, or simply provide it when you configure the store.

import Firebase, { FirebaseContext } from './firebase';
import reducer from './redux/reducer';

const firebase = new Firebase();
const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(firebase)),
);

ReactDOM.render(
  <FirebaseContext.Provider value={firebase}>
    <Provider store={store}>
      <App />
    </Provider>
  </FirebaseContext.Provider>,

  document.getElementById('root')
);

Also, you still need to correct the order of arguments in your thunk. Redux-thunk will call your function with dispatch, getState, firebase in that order. Even though you aren't using getState you can't ignore it. It will still be pass as an argument to your thunk.

function doSomeWork() {
  return (dispatch, getState, firebase) => {
    function work() {
      const userRef = firebase.userDoc(firebase.auth.currentUser.uid);
      dispatch(doSomeWorkStart());
    }
    return work;
  };
}

Option 2:

The alternative option, as mentioned, is to access the context inside of your component, and pass it as an argument to your action creator.

function doSomeWork(firebase) {
  return (dispatch, getState) => {
    function work() {
      const userRef = firebase.userDoc(firebase.auth.currentUser.uid);
      dispatch(doSomeWorkStart());
    }
    return work;
  };
}

function MyComponent(props) {
  const dispatch = useDispatch();
  const firebase = useContext(FirebaseContext);

  useEffect(() => {
    dispatch(doSomwWork(firebase))
  },[])

  return <></>;
}

However, I think the first option is your best bet.