Ask Your Question
4

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

asked 2021-06-14 11:00:00 +0000

pufferfish gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2021-06-29 00:00:00 +0000

qstack gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-06-14 11:00:00 +0000

Seen: 11 times

Last updated: Jun 29 '21