React-Redux를 사용한 Redux 툴킷에 대한 간단한 가이드

React의 Redux 기능은 애플리케이션의 상태 변경을 추적하는 데 도움이 되며 더 크고 복잡한 환경(애플리케이션 크기 측면에서)을 강력하고 이해하기 쉬운 방식으로 처리하는 데 도움이 됩니다.

React의 Redux Toolkit 패키지도 저장소를 만들고 거기에서 상태 변경을 추적하는 것을 목표로 하지만 더 간단하고 구성 프로세스(보일러 플레이트 코드)가 기존 redux 코드보다 훨씬 적습니다.

이 기사에서는 redux-toolkit 패키지, 설치 및 애플리케이션의 상태 변경을 매우 간단한 방식으로 추적하는 방법을 살펴보겠습니다.
이 응용 프로그램은 앱의 감속기에 evenCalculator를 유지하여 짝수를 표시합니다.

반응 앱이 이미 생성되어 있다는 점을 고려하면 이제 터미널에서 다음 명령을 실행하여 redux-toolkit 패키지를 설치합니다.

npm install @reduxjs/toolkit

또는

yarn add @reduxjs/toolkit

툴킷을 설치했으면 이제 src --> redux 폴더에 store.js 파일을 만들 것입니다. 이것은 기본적으로 저장소를 구성하는 것을 목표로 하며 기본적으로 redux-thunk를 포함하고 Redux DevTools Extension의 사용도 가능하게 합니다. .
이 저장소에서는 redux-toolkit에서 configureStore()를 가져오고 기본 감속기를 내보냅니다. 코드는 다음과 같습니다.

import { configureStore } from "@reduxjs/toolkit"

export default configureStore({
  reducer: {}
});

또한 다음과 같은 방식으로 redux 저장소에서 상태에 액세스할 수 있도록 'react-redux'에서 Provider 함수의 App 구성 요소를 래핑해야 합니다.
index.js 파일:

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import store from "./redux/store";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

이제 동일한 감속기 폴더에 다른 파일을 생성합니다. 이 경우에는calculator.js라고 하며 여기에서는 createSlice() 함수를 사용하고 초기 상태 값을 정의하고 다음을 사용하여 슬라이스 감속기를 자동으로 생성합니다. 해당 작업 작성자 및 작업 유형.
Calculator.js에는 다음과 같은 방식으로 짝수 계산을 위한 작업 생성자가 있습니다.

import { createSlice } from "@reduxjs/toolkit";

export const calcSlice = createSlice({
  name: "calc",
  initialState: {
    calc: 0,
  },
  reducers: {
    evenCalculator: (state) => {
      state.calc += 2;
    },
  }
});

// Action creators are generated for each case reducer function
export const { evenCalculator } = calcSlice.actions;
export default calcSlice.reducer;

또한 store.js 파일에서 이 감속기를 다음과 같이 가져와야 합니다.

import calcReducer from "./calculator";

이제 react-redux의 useDispatch() 및 useSelector() 함수를 통해 App.js 파일에서 액션 생성기를 사용할 것입니다.
App.js 파일:

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { evenCalculator } from "./redux/calculator";
import "./styles.css";

export default function App() {
  const { calc } = useSelector((state) => state.calc);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1> The count is: {calc}</h1>
      <button onClick={() => dispatch(evenCalculator())}>Display Even Numbers</button>
    </div>
  );
}

이것은 우리를 이 응용 프로그램의 끝으로 이끕니다. 매우 간단한 앱이지만 redux-toolkit의 사용법을 매우 친절하게 설명합니다.
이 정보가 유용하기를 바랍니다.

아래는 이 애플리케이션의 코드를 찾을 수 있는 코드샌드박스 URL에 대한 링크입니다.
https://codesandbox.io/s/eager-borg-26rgl

즐거운 코딩...