参考错误：初始化前无法访问存储

Question

我有这个 store/index.ts

export const storeRedux = createStore(
  persistReducer(ReduxPersistConfig, rootReducer),
  composeEnhancers(applyMiddleware(sagaMiddleware))
);

并使用此实现来访问组件外部的令牌

//api.ts

import axios from 'axios';
import { storeRedux } from 'store';

let token;

const listener = () => {
  token = storeRedux.getState().user.token;
};

storeRedux.subscribe(listener);

// console.log(() => getAPI());

export default axios.create({
  baseURL: 'http://localhost:5000/api/security',
  headers: {
    Authorization: `Bearer ${token}`,
  },
 
});

如果我添加一个 setTimeout 来包装，getState()那么一切都会好起来的。

是否有其他解决方案，因为商店已经像本文中那样分开了

Answer 1

我知道它很旧，但没有答案的问题让我眼睛酸痛。

您必须确保依赖代码的执行顺序，一旦存储启动，您需要注册监听器。例如，您可以使用 init 方法来执行此操作：

// api.ts
import { AnyAction, Store, Unsubscribe } from "redux";
import axios from 'axios';

let token;

export const initApi = (store:Store<TState, AnyAction>):Unsubscribe => {
  return store.subscribe(()=>{
    token = store.getState().user.token;
  })
}


export default axios.create({
  baseURL: 'http://localhost:5000/api/security',
  headers: {
    Authorization: `Bearer ${token}`,
  },
 
});

注意描述TState了您的状态，例如

export type TState = {
  // ...
  user: { token: string; }
}

现在，您可以在商店启动后使用它

// store/index.ts
import { initApi } from '../location/to/api.ts'; 

const storeRedux = createStore(
  persistReducer(ReduxPersistConfig, rootReducer),
  composeEnhancers(applyMiddleware(sagaMiddleware))
);


initApi(storeRedux);

export { storeRedux };