在第一页加载时从 createApi RTK 访问 localStorage

Posted 2023-02-19

【中文标题】在第一页加载时从 createApi RTK 访问 localStorage

【英文标题】：Access to localStorage from createApi RTK on first page load

【发布时间】：2021-12-20 18:19:54

【问题描述】：

我有一种情况，我需要在页面加载时读取我的 .env 文件，如果有特定值，那么我在我的商店中分派该值，在那里我有 createApi => baseUrl 需要访问到该值或 localStorage，以便将其用作 api 调用，这是我的代码示例：

App.tsx

    React.useEffect(() => 
    const myCustomEndpoint = window._env_.MYENDPOINT;
    if(myCustomEndpoint) 
      dispatch(setApiEndpoint(myCustomEndpoint));
    
, [])

src/redux/reducerSlice.ts

export const reducerSlice = createSlice(
//...more slices
   setApiEndpoint: (state, action: PayloadAction<string>) => 
      state.apiEndpoint = action.payload;
      localStorage.removeItem('api');
      localStorage.setItem('api', state.apiEndpoint);
    
)

src/services/api.ts

const baseUrl = localStorage.getItem(config.apiEndpoint) || '';
export const dataApis = createApi(
  reducerPath: 'dataApis',
  baseQuery: fetchBaseQuery( baseUrl ), // here I cannot get the API for first time the page load
endpoints: (builder) => (
 // my endpoints
)

那么有没有办法访问我在第一次加载我的应用时设置的 api 端点的 localStorage？

【参考方案1】：

我想你可以直接在createApi方法中设置端点，所以像这样使用例如：fetchBaseQuery( baseUrl: window._env_.MYENDPOINT || '' )。

【讨论】：

感谢您的分析，但我已经考虑过这一点，如果我要使用它，那么 api 它不会是动态的，所以我不会在我想要的时候改变它，我也无法将其正确存储在 localStorage 中