Как добавить redux Toolkit в приложение React-redux ⚛️

За последние пару дней я понял, что я не был один в изучении чудес redux Toolkit. Так что для тех из вас, кто находятся в той же лодке, что и я, будьте готовы к некоторым уткам!

Введение

Redux Toolkit – это пакет, который был построен на вершине redux Библиотека JS с открытым исходным кодом для управления состоянием приложения Отказ Пакет позволяет пользователю избежать ненужного кода BoaterPlate, а также предоставляет API, которые делают приложения сушилки и более ремонсимыми. Если вы хотите больше прочитать подробнее о redux Toolkit и его функции, у меня есть еще один пост блогов здесь Отказ

Сегодня мы будем сосредоточиться на том, как реализовать инструментарий Redkit в приложении React-Redux.

Установка

В первую очередь установите пакет Toolkit Redkit в вашем приложении React-Redux:

npm install @reduxjs/toolkit react-redux

Создать Store redux.

Создайте файл с именем SRC/Redux/Store.js. Я выбираю, чтобы назвать папку, содержащую мой магазин и ломтики «redux», в документации вы увидите его названным «Приложение», Конвенция – это ваш выбор. Внутри файла store.js импортирует ConfigureStore () API из redux Toolkit. Вы просто просто собираетесь начать с создания и экспорта пустого магазина Redux:

// src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

Создавая магазин Redux, теперь вы можете наблюдать за магазином из расширения Redux Devtools при разработке.

После создания магазина необходимо сделать его доступным для ваших компонентов React Ports, установив поставщик React-Redux по вашему приложению в SRC/index.js. Импортируйте свой вновь созданный магазин Redux, поставьте провайдер по приложению и пройдите в магазин как опоры:

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './redux/store' // import your store
import { Provider } from 'react-redux' // import the provider

ReactDOM.render(
   // place provider around app, pass store as prop
    
  , 
  document.getElementById('root')
)

И там у вас есть, красиво настроив магазин redux.

Создать ломтики

Чтобы создать свой первый ломтик, мы добавим новый файл Как правило, названо в честь того, что вы будете выполнять действия, или сам действие Отказ Для этого примера, скажем, мы создаем приложение, которое позволяет пользователю создавать сообщения. Я бы тогда создал файл с именем SRC/Redux/postslice.js. В пределах этого файла вы бы импортируете API CreateSlice из redux Toolkit, как:

// src/redux/PostSlice.js

import { createSlice } from '@reduxjs/toolkit'

Ломтик требует названия строки определить ломтик , начальное состояние состояния и один или несколько функций редуктора, Определение того, как состояние может быть обновлено . После создания среза вы можете экспортировать уже сгенерированные создатели redux Action и редукторную функцию для всего среза.

Redux требует, чтобы мы пишете все обновления состояния неизменно, это делает это, создавая копии данных и обновляя копии. Но, Redux Toolkit’s CreatesLice и Творцезерщик APIS используют Иммер , пакет, который позволяет работать с неизменным состоянием , позволяя вам написать «мутировать» логику обновления, которые затем становится правильными неизменными обновлениями. Прямо сейчас вы, вероятно, используете для ваших акций, которые выглядят что-то подобное:

function addPost(text) {
  return {
    type: 'ADD_POST',
    payload: { text },
  }
}

Но redux Toolkit предоставляет вам функцию под названием CreateAction , который генерирует создатель действий, который использует данный тип действий и превращает свой аргумент в поле полезной нагрузки. Он также принимает аргумент «Preepare Callback», что позволяет вам настроить поле возвращающейся полезной нагрузки:

const addPost = createAction('ADD_POST')
addPost({ text: 'Hello World' })

Редукторы Redux Поиск конкретных типов действий, чтобы узнать, как они должны обновить свое состояние. Хотя вы можете использовать для отдельно определяющих функций строк действий и функции Action Creators, функция CreateAction вырезает некоторые из тренировок для вас.

Вы должны знать это, CORSEAction переопределяет метод TOSTRING () на создателей действия, который он генерирует . Это означает, что в некоторых пунктах такого обеспечения ключей для Builder.Addcase или объекта Creategucer. Сам создатель действий может использоваться в качестве ссылки «Тип действия». Кроме того, тип действий определяется как поле типа на Action Creator.

Вот кодовый фрагмент от Dradux Toolkit Документация :

const actionCreator = createAction('SOME_ACTION_TYPE')

console.log(actionCreator.toString())
// "SOME_ACTION_TYPE"

console.log(actionCreator.type)
// "SOME_ACTION_TYPE"

const reducer = createReducer({}, (builder) => {
  // actionCreator.toString() will automatically be called here
  // also, if you use TypeScript, the action type will be correctly inferred
  builder.addCase(actionCreator, (state, action) => {})

  // Or, you can reference the .type field:
  // if using TypeScript, the action type cannot be inferred that way
  builder.addCase(actionCreator.type, (state, action) => {})
})

Вот как наш пример PostLlice будет выглядеть, если бы мы использовали файловую структуру «Уток» …

// src/redux/PostSlice.js

const CREATE_POST = 'CREATE_POST'

export function addPost(id, title) {
  return {
    type: CREATE_POST,
    payload: { id, title },
  }
}

const initialState = []

export default function postsReducer(state = initialState, action) {
  switch (action.type) {
    case CREATE_POST: {
      // Your code
      break
    }
    default:
      return state
  }
}

Хотя это определенно упрощает вещи, вам все равно нужно было бы написать действия и создатели действий вручную. Чтобы сделать вещи еще проще, redux Toolkit включает в себя функцию CreateSlice, которая автоматически генерирует типы действий/действия Action для вас, основанные на именах предоставленных функций редуктора.

Вот как наши обновленные сообщения пример будут посмотлен с CreateSlice:

// src/redux/PostSlice.js

import { createSlice } from '@reduxjs/toolkit'

const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    createPost(state, action) {}
  },
})

const { createPost } = postsSlice.actions
export const { createPost } = actions
export default PostSlice.reducer

Ломтики, определенные таким образом, аналогичны в концепции с рисунком «Redux Ducks». Тем не менее, есть несколько вещей, которые можно остерегаться при импорте и экспорте ломтиков.

Типы действий redux не должны быть исключительными для одного нарезания.
- Глядя на нее абстрактно, каждый редуктор среза «владеет» своим собственным частью состояния Redux. Но он должен иметь возможность слушать любой тип действий, обновляя его состояние соответственно. Например, многие разные срезы могут иметь ответ на действие «выйти», путем очистки или сброса данных обратно в исходные значения состояния. Важно помнить это, когда вы оформляете форму вашей состояния и создаете свои ломтики.
Модули JS могут иметь «Круговые ссылки» проблемы Если два модуля пытаются импортировать друг друга.
- Это может привести к неопределенному импорту, что, вероятно, сломает код, который нуждается в том, чтобы импорт. В частности, в случае «уток» или ломтиков, это может произойти, если ломтики, определенные в двух разных файлах, оба хотят реагировать на действия, определенные в другом файле. Решение этого обычно перемещает общий/повторный код до отдельной, общий файл, который оба модуля могут импортировать и использовать. В этом случае вы можете определить некоторые распространенные типы действий в отдельном файле, используя CONSEAction, импортируйте эти создатели действий в каждый файл среза и обрабатывают их с помощью аргумента экстрареактивных средств.

Это было лично проблемой, которую я имел при первом использовании redux Toolkit, и давайте просто скажем, это было очень долго 8 часов …

Добавить редукторы для хранения

Как только вы создали свой ломтик, и прочитайте/подписали условия, перечисленные выше Вы можете импортировать свои редукторы в магазине. Состояние Redux обычно организовано в «ломтики», определяемыми редукторами, которые передаются в комбинезон:

// src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'
import postsReducer from './postSlice'

const rootReducer = combineReducers({
  posts: postsReducer
})

Если бы у вас было более одного ломтика, это будет выглядеть так:

const rootReducer = combineReducers({
  users: usersReducer,
  posts: postsReducer
})

Вы можете забрать, что редукторы …

«Собственный» часть государства, в том числе то, что является начальное значение.
Определите, как обновляется это состояние.
Определить, какие конкретные действия приводят к Государственные обновления

Выполнение асинхронной логики и получения данных

Вы также можете спросить, как импортировать и использовать это в ваших фактических компонентах, где USEDISPATH, ISELECTOR , Подключите, а mapdispatchtoprops приходит в игру.

Если вы хотите включить Async Logic в свой код, вам придется использовать промежуточное программное обеспечение для включения Async Logic, Если вы не хотели бы написать все этот прекрасный код самостоятельно Отказ

Один из магазина redux ничего не знает о Async Logic. Он только знает, как синхронно отправлять действия, обновляйте состояние, вызывая функцию ROOT REDECTER, и уведомить UI, что что-то изменилось. Итак, Любая асинхроника должна случиться за пределами магазина. Если вы хотите реализовать это в ваше приложение, я бы посмотреть на это Документация и использование Createasynckunk Отказ

Заключение

Вы успешно перешли из Vanilla Redux на redux Toolkit! У вас, вероятно, у вас есть некоторая очистка, чтобы сделать на протяжении всего вашего приложения, так как ваш код был очень уменьшенный . Хотя это определенно не охватывает всю пакет, он должен, по крайней мере, начать вас!

Я искренне надеюсь, что эта статья помогла вам в вашем переходе от Vanilla Redux на redux Toolkit. Я был бы признателен за любые отзывы, которые у вас есть, и не стесняйтесь делиться своими приложениями, используя Toolkit Redkit! Счастливое кодирование!

Источники/Дополнительные ресурсы:

Оригинал: “https://dev.to/mmeurer00/how-to-add-redux-toolkit-to-a-react-redux-application-i9f”

Оглавление