导出我的store变量

export const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

在action文件或者你的文件中需要导入这个(store)

Import {store} from "./path…";

这一步用函数从存储变量中获取状态

const state = store.getState();

获取你的app的所有状态

用钩子做。我遇到了类似的问题，但我使用的是带有钩子的react-redux。我不想在我的界面代码(例如，react组件)中添加大量专门用于从商店检索/向商店发送信息的代码。相反，我希望使用具有通用名称的函数来检索和更新数据。我的路径是把应用程序的

const store = createSore(
   allReducers,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

并在const之前添加export，并在store.js中添加常用的react-redux导入。文件。然后，我在应用程序级别导入到index.js，然后我用通常的import {store}从“./store.js”导入到index.js，然后子组件使用useSelector()和useDispatch()钩子访问商店。

为了在非组件前端代码中访问存储，我使用了类似的导入(即从“../../store.js”导入{store})，然后使用store. getstate()和store.js。分派({*action goes here*})来处理存储的检索和更新(呃，发送动作到)。

像@sanchit一样，如果您已经全局定义了axios实例，那么提议的中间件是一个很好的解决方案。

你可以创建一个这样的中间件:

function createAxiosAuthMiddleware() {
  return ({ getState }) => next => (action) => {
    const { token } = getState().authentication;
    global.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : null;

    return next(action);
  };
}

const axiosAuth = createAxiosAuthMiddleware();

export default axiosAuth;

像这样使用它:

import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(axiosAuth))

它将在每个操作上设置令牌，但您只能侦听例如更改令牌的操作。

对于TypeScript 2.0，它看起来是这样的:

MyStore.ts

export namespace Store {

    export type Login = { isLoggedIn: boolean }

    export type All = {
        login: Login
    }
}

import { reducers } from '../Reducers'
import * as Redux from 'redux'

const reduxStore: Redux.Store<Store.All> = Redux.createStore(reducers)

export default reduxStore;

MyClient.tsx

import reduxStore from "../Store";
{reduxStore.dispatch(...)}

这可能有点晚，但我认为最好的方法是使用axios.interceptors如下所示。导入url可能会根据项目设置而改变。

index.js

import axios from 'axios';
import setupAxios from './redux/setupAxios';
import store from './redux/store';

// some other codes

setupAxios(axios, store);

setupAxios.js

export default function setupAxios(axios, store) {
    axios.interceptors.request.use(
        (config) => {
            const {
                auth: { tokens: { authorization_token } },
            } = store.getState();

            if (authorization_token) {
                config.headers.Authorization = `Bearer ${authorization_token}`;
            }

            return config;
        },
       (err) => Promise.reject(err)
    );
}

访问令牌的一个简单方法是将令牌放在LocalStorage或AsyncStorage中，使用React Native。

下面是一个React Native项目的例子

authReducer.js

import { AsyncStorage } from 'react-native';
...
const auth = (state = initialState, action) => {
  switch (action.type) {
    case SUCCESS_LOGIN:
      AsyncStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
      };
    case REQUEST_LOGOUT:
      AsyncStorage.removeItem('token');
      return {};
    default:
      return state;
  }
};
...

和api.js

import axios from 'axios';
import { AsyncStorage } from 'react-native';

const defaultHeaders = {
  'Content-Type': 'application/json',
};

const config = {
  ...
};

const request = axios.create(config);

const protectedRequest = options => {
  return AsyncStorage.getItem('token').then(token => {
    if (token) {
      return request({
        headers: {
          ...defaultHeaders,
          Authorization: `Bearer ${token}`,
        },
        ...options,
      });
    }
    return new Error('NO_TOKEN_SET');
  });
};

export { request, protectedRequest };

对于web，您可以使用Window。localStorage而不是AsyncStorage