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

Question

我有一种情况，需要在页面加载时读取.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？

Answer 1

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