我尝试将React.createContext Api注入Thunk与ExtraArgument，但不明白某些内容

Question

我是React学习的新手，现在我有了这个Redux Thunk，我需要将这个firebase上下文注入其中。

FirebaseContext上下文：
(它还创建了一个withFirebase，我将它与Rect.Components一起使用。(

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;

这就是FirebaseContext.Provider的分配方式：

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'),
);

创建Redux商店时，我像这样注入它：

thunk.withExtraArgument(FirebaseContext),

这是我的Redux Thunk，当运行它时，会调用Thunk，但FirebaseContext必须是value={new Firebase()}value，但不明白如何做到这一点。我已经搜索了几个小时，还尝试使用withFirebase来包装Thunk，但是Thunk不喜欢！

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;
};
}

我怎样才能通过"；值"；那是new Firebase()进入我的雷神？？

Answer 1

编辑：

选项1：

我认为，与其试图将FirebaseContext传递给你的thunk，不如只传递Firebase对象本身。您不能在thunk内部使用上下文，因此您需要将上下文值作为参数从组件传递给thunk，或者在配置存储时简单地提供它。

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')
);

此外，你仍然需要纠正你的thunk中论点的顺序。Redux-thunk将按此顺序用dispatch, getState, firebase调用您的函数。即使你没有使用getState，你也不能忽略它。它仍然会作为参数传递给你的thunk。

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

选项2：

如上所述，另一种选择是访问组件内部的上下文，并将其作为参数传递给操作创建者。

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 <></>;
}

然而，我认为第一个选项是你最好的选择。