使用 React redux/thunk 和 axios 连接 Firebase（来自 google）

Question

我使用：firebase.google.com 我想将我的 React 应用程序与 FireBase 连接起来 我有一个 Axios 文件，我想用 thunk 拨打电话 我在通话时收到以下错误

xhr.js:177 GET https://...e.app/storys.json 401（未经授权）

这是我的获取函数

export const fetchHelp = () => async (dispatch) => {
  return await api('get', `/help`)
    .then((response) => {
      return dispatch(fetchHelpSuccess(response.data as Array<HelpType>));
    })
    .catch((err) => console.log('err', err));
};

这是我的 axios

import axios, { Method, AxiosRequestConfig } from "axios";
import { API_BASE_URL } from "../constants/app-api";
import * as firebase from "firebase";

axios.defaults.baseURL = API_BASE_URL;

export default function api<T>(
  method: Method,
  url: string,
  params = {},
  headers = {},
  noAuth: boolean = false,
  restOfConfig: AxiosRequestConfig = {}
) {
  const body = method === "get" ? "params" : "data";


  const config = {
    method,
    url,
    [body]: params,
    headers: noAuth
      ? headers
      : {
          Authorization: "AIzaSyAmWV_pb3sVjJeWkvpwVmZLMfPdnD9Yw5c",
          ...headers,
        },
    ...restOfConfig,
  };
  return axios.request<T>(config);
}

这是带有 conf 的 firebase 文件（我已将它们全部完整但在堆栈中清除）

import firebase from "firebase";
const config = {
  apiKey: "....",
  authDomain: ".....",
  databaseURL:
    "....",
  projectId: "...",
  storageBucket: "....",
  messagingSenderId: "....",
  appId: "......",
  measurementId: ".....",
};
firebase.initializeApp(config);
export default firebase;

Answer 1

在你的 index.js 中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducers';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import fbConfig from './config/fbConfig';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // use this one in production and remove composeEnhancers

const store = createStore(
  rootReducer,
  // compose(
  // use this one in development and remove composeEnhancers below
  composeEnhancers(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reduxFirestore(fbConfig),
    reactReduxFirebase(fbConfig, { attachAuthIsReady: true })
  )
);

store.firebaseAuthIsReady.then(() => {
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );
  // If you want your app to work offline and load faster, you can change
  // unregister() to register() below. Note this comes with some pitfalls.
  serviceWorker.register();
});

您的 rootReducer.js 文件应如下所示

import auth from './auth';
import getData from './getData';
import setData from './setData';
import addData from './addData';

import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase';
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  auth,
  getData,
  addData,
  setData,
  firestore: firestoreReducer,
  firebase: firebaseReducer,
});

export default rootReducer;