Redux - RTK Query (Mocked Base)

const { configureStore } = RTK;
const { createApi } = RTK;
// Mock baseQuery: waits and returns data
const mockBaseQuery = async (args) => {
  await new Promise(r => setTimeout(r, 400));
  return { data: { id: 1, title: 'Hello from RTK Query (mock)' } };
};
const api = createApi({
  reducerPath: 'api',
  baseQuery: mockBaseQuery,
  endpoints: (builder) => ({
    getGreeting: builder.query({ query: () => ({}) })
  })
});
const store = configureStore({ reducer: { [api.reducerPath]: api.reducer }, middleware: gDM => gDM().concat(api.middleware) });
function App(){
  const { Provider, useDispatch, useSelector } = ReactRedux;
  const selectGreeting = api.endpoints.getGreeting.select();
  function Panel(){
    const dispatch = useDispatch();
    const state = useSelector(selectGreeting);
    const status = state?.status || 'uninitialized';
    return (
      <div>
        <button onClick={() => dispatch(api.endpoints.getGreeting.initiate())} disabled={status==='pending'}>Fetch</button>
        <div style={{marginTop:8}}>Status: {status}</div>
        {state?.data && <div>Data: {state.data.title}</div>}
        {state?.error && <div style={{color:'salmon'}}>Error</div>}
      </div>
    );
  }
  return <Provider store={store}><Panel /></Provider>;
}
ReactDOM.createRoot(document.getElementById('rtkq-root')).render(<App />);