How can I use next-redux-wrapper together with redux-toolkit and rtk query, without implementing Typescript?

edit

Here's how you can use next-redux-wrapper together with redux-toolkit and rtk-query, without implementing Typescript:

1. Install the required dependencies:

npm install react-redux redux next-redux-wrapper @reduxjs/toolkit @reduxjs/toolkit-query

1. Create a Redux store using configureStore from redux-toolkit:

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { reducer } from './reducers';

export const store = configureStore({
  reducer: {
    // Add your reducers here
    ...reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(setupListeners()),
});

This creates a store with your application's reducers and rtk-query middleware for handling network requests.

1. Wrap your Next.js application with next-redux-wrapper:

import { Provider } from 'react-redux';
import { store } from './store';
import { createWrapper } from 'next-redux-wrapper';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

const makeStore = () => store;

export default createWrapper(makeStore).withRedux(MyApp);

This creates a Provider component that passes the store to all children through the react-redux library. Then, you create a store using the makeStore function and pass it to createWrapper, which creates a higher-order component that you can use to wrap your Next.js application.

That's it! You can now use redux-toolkit and rtk-query in your Next.js application without having to implement Typescript.