Простая настройка React Redux с помощью next.js (React)
Я видел пример next.js для использования избыточности. Но есть ли простой способ настроить редукцию с помощью next.js? Я хочу настроить редукцию так, как раньше устанавливал с помощью react.js.
Я хотел решение с npx create-next-app и аналогичной настройкой, как я привык реагировать. Теперь я могу это сделать. и поделился своим ответом здесь тоже.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper
не может быть проще, чем это
хотите использовать с этим «npx create-next-app»
это репо поставляется с предварительной настройкой редукции, вам просто нужно изменить в соответствии с вашими потребностями, иначе просто скопируйте, как это репо сделало настройку в вашем пустом приложении nextjs.
Я бы порекомендовал использовать redux toolkit, потому что он уменьшает шаблонный код в redux...
Согласно моему личному опыту, если вы задаете этот вопрос только для начального обучения, то вашей первой настройки, которую вы приложили в качестве ответа, достаточно, но для реального приложения, поэтому обязательно используйте Redux Toolkit. Вы можете проверить этот пример песочницы
Предполагая, что у вас есть знания в Redux с React.
Сначала установите эти пакеты
$ npm install next-redux-wrapper react-redux redux redux-thunk --save
$ npm install redux-devtools-extension --save-dev
Переопределите или создайте приложение по умолчанию, создайте файл ./pages/_app.js, как показано ниже:
import withRedux from 'next-redux-wrapper'
import { Provider } from 'react-redux'
import { withRouter } from 'next/router'
import App from 'next/app'
import createStore from 'store/createStore'
class MyApp extends App {
render () {
const { Component, pageProps, router, store } = this.props
return (
<Provider store = {store}>
<Component router = {router} {...pageProps} />
</Provider>
)
}
}
export default withRedux(createStore)(
withRouter(MyApp)
)
На своих страницах/компонентах вы можете использовать Redux, как обычно.
для магазина я получаю ошибку ниже. Свойство store не существует для типа Readonly<AppInitialProps & { Component: NextComponentType<NextPageContext<any>, any, {}>; маршрутизатор: Маршрутизатор; __N_SSG?: логическое значение | неопределенный; __N_SSP?: логическое значение | неопределенный; __N_RSC?: логическое значение | неопределенный; }> и только для чтения<...>'
Сначала я создал простое приложение next.js с помощью «npx create-next-app». Затем я установил «npm i redux react-redux redux-thunk redux-devtools-extension
Затем я создал общую настройку избыточности в папке с именем «магазин», и структура папок похожа на следующее изображение, а код предназначен для store.js.
Код для редуктора> index.js
НАКОНЕЦ создал файл _app.js в папке страниц, и код выглядит так
Если у кого-то остались вопросы по настройке, дайте знать...
Обратите внимание, что мы официально рекомендуем использовать Redux Toolkit вместо vanilla Redux. Это сэкономит вам массу шаблонного кода в будущем. Посмотрите эту страницу официального руководства по редуксу для краткого ознакомления.
Точно! @ Насир Хан, я обновил свой ответ для вас. Пожалуйста, примите и поддержите мой ответ, если он решит вашу проблему.
Я не хочу использовать какой-либо другой инструмент. Я хочу использовать установку реакции с редукцией там, где мне было удобно. И я настроил таким образом, спасибо.
Где изображение _app.js? Вы только что продублировали редуктор > index.js???
Вот мой самый простой способ, вы можете следовать ему. https://github.com/imimran/next-redux-example
Отвечает ли это на ваш вопрос? Использование реакции редукса с next.js