React Redux 응용 프로그램에 Redux 키트를 추가하는 방법⚛️

카탈로그

Introduction

Installation

Create Redux Store

Create Slices

Add Reducers to Store

Performing Asynchronous Logic and Data Fetching

Conclusion

지난 며칠 동안 나는 레드ux 패키지를 배우는 기적이 나 혼자만이 아니라는 것을 깨달았다.그러니 나와 함께 배를 탄 사람들에게는 오리를 준비해라!
Redux 키트의

소개하다.

Redux Toolkit is package that was built on top of Redux an open-source JS library for managing application state. The package allows the user to avoid unnecessary boilerplate code, and supplies APIs that make applications DRYer and more maintainable. If you'd like to read more about Redux Toolkit and its features, I have another blog post available .

Today we'll be focusing on how to implement Redux toolkit in a React-Redux application.

장치

먼저 React Redux 응용 프로그램에 Redux Toolkit 패키지를 설치합니다. npm install@reduxjs/toolkit react redux Redux 스토어 만들기

Create a file named src/redux/store.js. I choose to name the folder containing my store and slices "redux", in the documentation you will see it named "app", the convention is your choice. Inside the store.js file, import the configureStore() API.빈 Redux 스토어를 생성하고 내보내기만 하면 됩니다.

// src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'

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

Redux 스토어를 만들면 개발할 때 Redux Devtools 확장에서 스토어를 관찰할 수 있습니다.

저장소를 만든 후, src/index에 프로그램에 React-Redux 제공 프로그램을 추가해서 React 구성 요소에 사용할 수 있도록 해야 합니다.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(
  <Provider store={store}> // place provider around app, pass store as prop
    <App />
  </Provider>, 
  document.getElementById('root')
)

이제 정교하게 꾸며진 레드ux 상점이 있습니다.

슬라이스 생성하기 첫 번째 슬라이스를 만들기 위해서, 우리는 새 파일을 추가할 것입니다. 보통 사용자가 그 위에 실행하거나 작업 자체를 명명할 것입니다.이 예에서 사용자가 댓글을 만들 수 있는 프로그램을 만들고 있다고 가정하십시오.그런 다음 src/redux/PostSlice라는 파일을 만듭니다.js。이 파일에서 다음과 같이 Redux Toolkit에서 CreateSlicit API를 가져옵니다. //src/redux/PostSlice。js "@reduxjs/toolkit"에서 가져오기 {createSlice} 슬라이드는 슬라이드, 초기 상태 값, 하나 이상의 Reducer 함수를 표시하는 문자열 이름이 필요합니다. 상태를 업데이트하는 방법을 정의합니다.슬라이스를 만들면 전체 슬라이스에 대해 생성된 Redux action creators와 Reducer 함수를 내보낼 수 있습니다.

Redux requires that we write all state updates immutably, it does this by making copies of data and updating the copies. But, Redux Toolkit's createSlice createReducer 및 Immer API는 createAction을 사용합니다. 이 패키지는 불변 상태를 사용할 수 있고'변이'업데이트 논리를 작성한 다음에 정확한 불변 업데이트가 될 수 있습니다.이제 당신의 동작 창작자가 이렇게 보이는 것에 익숙해졌을지도 모른다.

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

그러나 Redux Toolkit은 지정된 동작 유형을 사용하는 동작 작성자를 생성하고 해당 매개 변수를 유효한 하중 필드로 변환하는 Redux Toolkit Documentation이라는 함수를 제공합니다.또한 [prepare callback] 매개 변수를 적용하여 사용자가 반환할 유효한 부하 필드를 사용자 정의할 수 있습니다.

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

Redux Reducer는 상태를 업데이트하는 방법에 대해 특정 작업 유형을 검색합니다.동작 형식 문자열과 동작 창설자 함수를 각각 정의하는 데 익숙해질 수 있지만,createAction 함수는 작업량을 줄일 수 있습니다.
createAction은 생성된 작업 생성기의 toString () 방법을 덮어씁니다.이것은 일부 조항에서, 예를 들어 구축자에게 키를 제공하는 것을 의미한다.addCase 또는 createReducer 객체 표현동작 작성자 자체는 동작 유형 참조로 사용할 수 있습니다.또한 작업 유형은 작업 작성자의 유형 필드로 정의됩니다.
다음은 "circular reference" problems의 코드 세그먼트입니다.

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) => {})
})

다음은 Ducks 파일 구조를 사용하는 경우 PostSlice의 예입니다.

// 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에는 Create Sicle 함수가 포함되어 있으며, 이 함수는 제공된 Reducer 함수의 이름에 따라 자동으로 동작 형식/동작 창설자를 생성합니다.
다음은 CreateSicle을 사용하여 업데이트된 게시물의 예제 모양입니다.

// 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 작업 유형은 단일 세그먼트로 제한되지 않습니다.

추상적으로 보면 모든 슬라이스 Reducer는 자신의 Redux 상태를 가지고 있다.그러나 모든 동작 유형을 감청하고 그 상태를 업데이트할 수 있어야 한다.예를 들어, 여러 슬라이스가 로그아웃 작업에 응답하여 데이터를 지우거나 원래 상태 값으로 재설정할 수 있습니다.상태 모양을 디자인하고 슬라이스를 만들 때 이 점을 기억하는 것이 중요하다.

두 모듈이 서로 가져오려고 하면 JS 모듈은 개가 될 수 있습니다.

이 경우 가져오기가 정의되지 않아 가져올 코드가 손상될 수 있습니다.특히'오리'또는 슬라이스의 경우 두 파일에 정의된 슬라이스가 다른 파일에 정의된 작업에 응답하기를 원할 경우 발생할 수 있습니다.해결 방안은 일반적으로 공유/중복된 코드를 하나의 단독 공공 파일로 이동하는데 이 두 모듈 모두 가져오고 사용할 수 있다.이 경우,createAction을 사용하여 단독 파일에서 흔히 볼 수 있는 조작 유형을 정의하고, 이 조작 창설자를 각 슬라이드 파일로 가져오고,extraReducers 파라미터를 사용하여 처리할 수 있습니다.

이것은 내가 처음으로 Redux 도구 꾸러미를 사용할 때 겪은 문제이다. 우리는 이것이 매우 긴 8시간이라고 말할 수 있다...

저장할 환원제를 첨가하다 슬라이스를 만들고 위의 약관을 읽거나 서명하면 상점에서 감속기를 가져올 수 있습니다.Redux 상태는 일반적으로 "슬라이스"로 구성되어 조합된 감속기에 전달되는 감속기에 의해 정의됩니다. //src/redux/store。js "@reduxjs/toolkit"에서 {configureStore} 가져오기 가져오기 후 프로그램 복원/postSlice' const rootReducer=combinereducer({ 게시물:postsReducer }) 만약 당신이 여러 개의 슬라이스를 가지고 있다면, 그것은 이렇게 될 것이다. const rootReducer=combinereducer({ 사용자:usersReducer, 게시물:postsReducer }) 너는 감속기를 없앨 수 있어... 초기 값을 포함한 소유 상태 이 상태의 업데이트 방식을 정의합니다. 상태 업데이트를 초래할 특정 작업 정의

비동기식 논리 및 데이터 검색 수행

You also may be asking how to import and use this in your actual components, which is where useDispatch, useSelector connect, and mapDispatchToProps documentationcreateAsyncThunk에 입장합니다.
코드에 비동기 논리를 포함하기를 원한다면, 이 귀여운 코드를 모두 작성하려면 중간부품을 사용해야 합니다.
Redux store 자체는 비동기식 논리에 대해 아무것도 모릅니다.이것은 루트 Reducer 함수를 호출하여 상태를 업데이트하고 UI의 일부 내용이 변경되었음을 알리는 동기화 작업만 알 수 있습니다.따라서 모든 비동기는 상점 밖에서 발생해야 한다.만약 당신이 151790으로 이 프로그램을 실현하고 싶다면, 나는 151790을 사용할 것이다.

결론

You have successfully transitioned over from vanilla Redux to Redux Toolkit! You probably have some cleaning up to do throughout your application, as your code has been greatly reduced. While this definitely does not cover the entirety of the package, it should at least get you started!

I sincerely hope this article has aided you in your transition from vanilla Redux to Redux Toolkit. I would appreciate any feedback you have, and feel free to share your applications using Redux Toolkit! Happy Coding!

소스/보충 자료:

Redux Toolkit Documentation

"circular reference" problems