Добавьте Redux к следующему приложению JS

В этой статье я пойду, как вы можете настроить следующее приложение JS для использования redux.

Сначала настройте следующую заявку JS

yarn create next-app next-redux

Далее мы устанавливаем нужные пакеты

yarn add redux redux-thunk next-redux-wrapper react-redux

После этой установки создайте папку Redux в корне вашего проекта, внутри этой папки добавляют файлы типов.js и Store.js, также добавляют папки для действий и редукторов.

В файле типов давайте добавим один тип; Для установки имени пользователя

export const SET_NAME = "SET_NAME"

В папке редукторов добавьте main.js файл, В этом файле мы создадим редуктор, который будет управлять основным состоянием нашего приложения.

В этом файле мы будем инициализировать основное состояние только с одним значением для имени, которое по умолчанию для гостя. Затем мы будем использовать оператор коммутатора для обнаружения прошедших в действии и значения, состояние обновляется на основе полученного значения.

import * as t from "../types";

const main = (state = {
    name: "guest",
}, action) => {
  switch(action.type){
    case t.SET_NAME:
      return { 
        ...state,
        name: action.payload
      };
    default:
      return {...state};
    }
}

export default main;

В той же папке редукторов мы добавим rootorducer.js Файл, этот файл будет объединить все наши редукторы в одну, наиболее полезно, когда у вас есть несколько файлов редукторов, для этой статьи я буду использовать только один файл редуктора, который является моим основным редуктором.

import { combineReducers } from "redux"
import main from "./main"

const rootReducer = combineReducers({
  main: main
})

export default rootReducer;

Далее мы переходим к нашему store.js файл

В этом файле мы создадим наш магазин Redux, используя redux. и Далее-redux-обертка Мы также добавим Redux-Thunk Чтобы позволить нам иметь дополнительные функции перед отправкой новых значений в наше состояние.

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./reducers/rootReducer"

const middleware = [thunk]

const makeStore = () => createStore(rootReducer, compose(applyMiddleware(...middleware)))

export const wrapper = createWrapper(makeStore)

Теперь мы создадим наше набор имен, создайте main.js Файл в папке «Действия» в нем у нас будет функция, указывающая тип установленного имени с новым значением имени.

import * as t from "../types";
import axios from "axios";
import { request } from "../../util/request";

export const setInfo = (name) => dispatch => {
  dispatch({
    type: t.SET_NAME,
    payload: name
  });
}

После того, как вы сделали все это, наш каталог должен выглядеть ниже

Теперь перейдите к вашему _app.js файл, он должен выглядеть как;

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return 
}

export default MyApp

Обновить это, чтобы выглядеть как;

import React from "react"
import { wrapper } from "../redux/store"

const MyApp = ({ Component, pageProps}) => (
  
)

export default wrapper.withRedux(MyApp);

Мы завернули приложение в обертке Redux, которые мы создали в нашем файле хранилища и передавали его реквизиту. В нашем index.js Выньте все страницы содержимого и оставьте входную коробку, спрашивая имя.

return (
    
      Enter a Name :
      

        
        
    
  )

Далее мы добавляем какое-то государственное управление для обновления и хранения стоимости нашей формы, используя Уместите , мы также связываем нашу страницу индекса к нашему состоянию Redux и, наконец, подключаем действия, используя mapdispatchtopops. и состояние, использующее mapstatetopops. финал index.js должен выглядеть как ниже

import { useState } from 'react'
import { connect } from "react-redux"
import { setInfo } from "../redux/actions/main"
import styles from '../styles/Home.module.css'

function Home(props) {
  const { name, setInfo } = props
  const [newName, setName] = useState("")

  return (
    
      Enter a Name {name}:
       setName(e.target.value)}>

        
        
    
  )
}

const mapStateToProps = state => {
 return { name: state.main.name }
}

const mapDispatchToProps = {
  setInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Чтобы быть в состоянии отладить с Redux dev tools обновите свой store.js код для;

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./reducers/rootReducer"

const middleware = [thunk]

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(applyMiddleware(...middleware));

const makeStore = () => createStore(rootReducer, enhancer)

export const wrapper = createWrapper(makeStore)

Ваша домашняя страница теперь должна выглядеть как изображение ниже, а изменение имени должно обновить значение «Гость»

Если вы найдете эту статью полезную, вы также можете оформить прочее следующие видео JS на YouTube или Полный стек Следующий курс JS по UDEMY

Оригинал: “https://dev.to/theallegrarr/adding-redux-to-next-js-app-4n5o”

Читайте ещё по теме: