Redux 사망: Redux 키트 만세

작성자Victoria Lo
본고에서 Redux 도구 패키지를 이해하거나 개발팀은'효율적인 Redux 개발에 사용되는 공식적이고 독선적인 도구 모음'이라고 부른다.

Redux 및 작동 방식
대부분의 웹 개발자들은 유행하는 주 관리 라이브러리인 Redux에 대해 들어본 적이 있을 것이다.2015년에는 댄 아브라모프(Dan Abramov)와 앤드루 클라크(Andrew Clark)가 만든 혁명적인 국가 관리 솔루션으로 프런트엔드 세계에 처음 등장했다.
React, Angular 또는 Vue 등 프런트엔드 프레임워크에서 각 구성 요소는 내부에서 자신의 상태를 관리합니다.응용 프로그램이 갈수록 복잡해지면서 여러 구성 요소에 걸쳐 관리 상태가 단조롭고 어려워졌다.Redux가 이 문제의 해결 방안이 되었다.
Redux의 작업 원리는 응용 프로그램의 모든 상태를 저장하는 집중적인 '저장' 을 제공하는 것이다.프로그램의 모든 구성 요소는 이 상점에 접근할 수 있으며, 구성 요소 트리에서 도구를 전달할 필요가 없습니다.

그림codecentric

Redux 스트림
일반적인 Redux 프로세스는 다음과 같습니다.

사용자와 보기가 상호작용하여 트리거 상태 업데이트

상태 업데이트가 필요할 때 보기에서 동작을 보냅니다

감속기는 스케줄러로부터 조작을 수신하고 조작

에 따라 저장소의 상태를 업데이트한다.

상태 변경을 감청하는 보기를 구독합니다.구독 방법을 통해 변경 사항을 알리고 보기가 UI를 업데이트합니다

.

그림esri
Redux 프로세스는 3가지 주요 구성 요소로 구성되어 있습니다: 동작, 감속기, 저장소.이러한 어셈블리 간의 관계를 이해하는 것은 Redux의 작동 방식을 이해하는 데 필요합니다.
동작은 필요한 속성type이 있는 JavaScript 객체로, 필요할 때 사용자 정의 속성을 포함할 수 있습니다.그것들은 단지 국가에 무슨 일이 일어났는지 묘사하는 데 쓰일 뿐, 그것들을 바꾸는 것은 책임지지 않는다.행동의 몇 가지 예:

//action to add a todo item
{ type: 'ADD_TODO', text: 'This is a new todo' } 
//action that pass a login payload
{ type: 'LOGIN', payload: { username: 'foo', password: 'bar' }} 

동작의 type은 동작을 설명하는 문자열일 뿐이며, 추가된 속성은 상태를 업데이트하는 데 필요한 정보입니다.store.dispatch(action) 방법을 통해 하나의 조작을 조정하고 복원 프로그램은 업데이트 상태를 책임진다.
환원기는 순수 함수로 상태의 현재 값을 수신하고 조작의 지시에 따라 조작을 실행한 다음에 상태의 새 값을 출력한다.그들은 국가의 가치관을 바꾸는 사람들이다.다음은 간단한 감속기 함수 예입니다.

//takes in the current state and action
//updates the value based on the action's type
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREASE':
      return { value: state.value + 1 }
    case 'DECREASE':
      return { value: state.value - 1 }
    default:
      return state
  }
}

마지막으로 상태가 저장소에서 업데이트됩니다.상점은 모든 주를 관리하는 곳이다.한 행에 만들 수 있습니다.

const store = createStore(myComponent);

UI에서 상태를 올바르게 표시하려면 구성 요소가 저장소에 가입해야 합니다.store.subscribe() 방법은 변경 탐지기를 추가하여 동작을 조정할 때마다 이 탐지기를 호출합니다.

Redux 키트를 사용하는 이유
이 점에서 Redux가 인기 있는 상태 관리 옵션인 이유를 알 수 있습니다.그것의 모델은 상태를 예측할 수 있게 한다. 왜냐하면 감축기는 순수 함수이기 때문에, 이것은 같은 상태와 전달하는 조작이 시종 같은 출력을 초래할 수 있다는 것을 의미한다.
Redux 흐름의 모든 부분에 대한 행위와 작업 방식에 대해 엄격한 조직이 있기 때문에 유지보수와 확장도 쉽다.그 밖에 Redux는 효율적인 테스트, 간단한 디버깅과 더 좋은 성능 등 많은 다른 장점을 가져왔다.
그러나 이 유연하고 수준 높은 주 관리 도서관은 다음과 같은 몇 가지 도전에 직면해 있다.

코드가 너무 많아 스토리지를 최적화 수준/Best Practice로 구성할 수 없음

너무 많은 샘플 코드는 코드의 깨끗함과 효율을 떨어뜨린다

확장형 어플리케이션을 구축하려면 설치해야 할 패키지가 너무 많음

대형 응용 프로그램에서 작성 조작과 간략함이 더욱 복잡하고 번거로워졌다

이러한 도전에 대응하기 위해 레드ux팀은 레드ux 도구 패키지를 제시했는데 이것은 공식적으로 추천한 레드ux 논리를 작성하는 방법이다.Redux Core를 Redux 애플리케이션 구축에 필요한 패키지에 포함함으로써 Redux 개발을 가속화하는 것이 목표입니다.이것은 Redux의 고집스러운 파생 제품으로 간단하고 빠르며 깨끗한 Redux 코드를 원하는 Redux 초보자나 개발자에게 많은 최상의 실천 설정을 제공한다.
Redux 키트를 사용하고 새 React 응용 프로그램으로 설정합니다.

Redux 키트 시작

1단계: 패키지 설치
Redux Toolkit 및 React Redux 패키지를 사용하기 시작하려면 기존 React 응용 프로그램에서 다음 명령을 실행할 수 있습니다.

npm install @reduxjs/toolkit react-redux

또는 Create React 애플리케이션을 통해 다음을 설치합니다.

npx create-react-app my-app --template redux

2단계: 스토리지 생성 및 초기화
이제 우리 주를 보존하기 위해 상점을 만들자.store.js 폴더에 src 파일을 만들고 다음 코드를 추가할 수 있습니다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {} //add reducers here
})

여기의 configureStore는 Redux의 원시createStore를 대체합니다.createStore와 달리 Redux Toolkit의 configureStore는 메모리를 만들었을 뿐만 아니라 리듀서 함수를 매개 변수로 받아들일 수 있으며 디버깅을 위한 Redux DevTools 확장을 자동으로 설정합니다.

3단계: React 애플리케이션에 스토어 제공
상점이 만들어지면, React 프로그램의 모든 구성 요소가 접근할 수 있어야 합니다.우리는 우리가 설치한 Provider 소프트웨어 패키지의 react-redux를 사용하여 이 점을 실현할 수 있다.index.js 파일에서 다음과 같이 Provider 및 store.js를 가져옵니다.

import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

4단계: 간단한 프로그램 및 작업 작성
현재 우리는 Redux 상점을 위해 Reducer 함수와 조작을 작성할 수 있다.
전통적인 Redux에서, 우리는 보통 각각 감축기와 조작을 작성한다.예를 들어, 카운터 애플리케이션의 간단한 감속기 및 작업은 다음과 같이 레거시 Redux로 작성됩니다.

행동

// actions/index.js
export const Increase = () => ({
  type: 'INCREASE'
})

export const Decrease = () => ({
  type: 'DECREASE'
})

감속기

// reducers/index.js
export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state + 1
    case 'DECREASE':
      return state - 1
    default:
      return state
  }
}

Redux 키트가 있으면 createSlice를 사용하여 코드를 더욱 간결하게 할 수 있습니다.응용 프로그램의 counterSlice.js 폴더에 src 파일을 만듭니다.감속기와 동작은 다음과 같이 슬라이스 아래에 쓸 수 있습니다.

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increase: state => {
      state.value += 1
    },
    decrease: state => {
      state.value -= 1
    }
  }
})

// each case under reducers becomes an action
export const { increase, decrease } = counterSlice.actions

export default counterSlice.reducer

위의 코드를 보면 Redux 도구상자에서 감축기와 조작을 정의하는 것이 더욱 간결하고 빨라졌다.상응하는 감축기가 있는 조작을 관리하기 위해 switch 문장을 사용할 필요가 없습니다.
새로운 값을 되돌려 상태를 업데이트하는 것이 아니라, Reducer 함수의 상태 값을 직접 수정하는 것 같습니다.이것은 사실상 Redux 도구상자에서 Immer 라이브러리를 사용하기 때문에 감축기에서 '변이' 논리를 작성할 수 있기 때문이다.

For more information on how Immer works, feel free to visit its documentation here.

5단계: 감속기를 저장소로 가져오기
우리는 이미 우리의 counterSlice.js 에서 우리의 감속기와 행동을 수출했다.그럼 감속기를 우리store.js에 도입합시다.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '.counterSlice' //import our reducer from step 4

export default configureStore({
  reducer: {
    counter: counterReducer //add our reducer from step 4
  }
})

6단계: UI에서 작업 할당
우리가 이전에 알고 있는 바와 같이, 우리의 보기는 상태를 갱신하기 위해 스케줄링할 동작을 터치합니다.Redux에서는 store.dispatch(action) 전송 작업을 사용합니다.
반대로 React Redux를 사용하여 useDispatch 갈고리를 사용하여 조작을 할당하고 useSelector 저장소에서 데이터를 읽습니다.
우리의 Counter.js 폴더에 src 파일을 만들어서 우리의 계수기 구성 요소를 표시합니다.이 파일에서, 우리는 React Redux에서 useDispatch 와 useSelector 갈고리를 가져올 것이다.우리는 또한 우리의 counterSlice.js에서 우리의 행동을 도입할 것이다.

import { useSelector, useDispatch } from 'react-redux'
import { decrease, increase } from './counterSlice'

그런 다음 카운터 함수는 2개의 훅을 초기화하고 UI 요소를 반환하여 클릭할 때 트리거dispatch(action)합니다.

export function Counter() {
  const count = useSelector(state => state.counter.value)
  // in our slice, we provided the name property as 'counter'
  // and the initialState with a 'value' property
  // thus to read our data, we need useSelector to return the state.counter.value

  const dispatch = useDispatch()
  // gets the dispatch function to dispatch our actions

  return (
    <div>
        <button onClick={() => dispatch(increase())}>
          Increase
        </button>
        <p>{count}<p>
        <button onClick={() => dispatch(decrease())}>
          Decrease
        </button>
    </div>
  )
}

오픈 소스 세션 재방송
생산 환경에서 웹 응용 프로그램을 디버깅하는 것은 어렵고 시간도 소모될 수 있다.OpenReplay는 풀스토리, 로그 로켓과 Hotjar의 소스 대체품이다.사용자가 한 모든 것을 감시하고 재방송할 수 있으며, 모든 문제에 대한 응용 프로그램의 표현을 보여 줍니다.
이것은 브라우저의 검사기를 열고 사용자의 어깨를 보는 것과 같다.
OpenReplay는 현재 유일하게 사용할 수 있는 오픈 소스 대안입니다.

즐거움 디버깅, 현대 전단 팀-Start monitoring your web app for free.

결론
초보자와 레드ux의 샘플 코드 양을 줄이고자 하는 개발자에게 레드ux 패키지는 좋은 선택이다.Redux 프로세스와 모드를 유지하면서 보다 깨끗하고 읽기 쉬운 코드를 작성할 수 있습니다.
읽어주셔서 감사합니다.나는 본고가 당신이 Redux를 이해하기 시작하고 응용 프로그램에서 Redux 도구 패키지를 사용하는 데 도움을 줄 수 있기를 바랍니다.건배!