Чтобы интегрировать Redux Toolkit в существующий проект Next.js, вы можете выполнить следующие действия:

Шаг 1. Установите Redux Toolkit и его зависимости
Вам необходимо установить Redux Toolkit и его необходимые зависимости. Откройте терминал вашего проекта и выполните следующую команду:

npm install @reduxjs/toolkit react-redux

Шаг 2. Создайте хранилище Redux
Создайте новый файл с именем store.jsв корневом каталоге вашего проекта. Внутри этого файла вы можете определить свое хранилище Redux, используя функцию configureStoreRedux Toolkit. Вот пример:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
const store = configureStore({
  reducer: rootReducer,
});
export default store;

В приведенном выше коде rootReducerпредставляет собой комбинированный редуктор для вашего приложения.

Шаг 3. Оберните приложение Next.js с помощью поставщика Redux.
Откройте файл _app.jsв каталоге pagesи оберните приложение Next.js. с поставщиком Redux. Вот пример:

import { Provider } from 'react-redux';
import store from '../store';
function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}
export default MyApp;

Шаг 4. Создайте фрагменты Redux
В Redux Toolkit вы можете определить состояние и действия Redux, используя «фрагменты». Создайте новый каталог под названием slicesв корневом каталоге вашего проекта и определите внутри него свои фрагменты. Вот пример счетчика:

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Шаг 5. Используйте состояние и действия Redux в своих компонентах.
В компонентах Next.js вы можете использовать состояние и действия Redux, определенные в ваших срезах. Вот пример использования состояния и действий счетчика:

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../slices/counter';
function Counter() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}
export default Counter;

Вот и все! Вы успешно интегрировали Redux Toolkit в существующий проект Next.js.