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

Question

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

FirebaseContext 上下文：
（它还创建了一个 withFirebase，我将其与 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;

这是 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() 的“值”传递到我的 Thunk 中？

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

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

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

I try to inject React.createContext Api into Thunk withExtraArgument but don't understand something

inject

reactjs

redux

redux-thunk

react-context

编辑：

选项 1：

选项 2：