Redux 툴킷 | 시작하는 방법

리덕스란?

Redux는 JavaScript 앱을 위한 예측 가능한 상태 관리 도구입니다. 일관되게 작동하고 다양한 환경(클라이언트, 서버 및 기본)에서 실행되고 테스트하기 쉬운 애플리케이션을 작성하는 데 도움이 됩니다. 또한 시간 이동 디버거와 결합된 라이브 코드 편집과 같은 훌륭한 개발자 경험을 제공합니다.

Redux를 React 또는 다른 뷰 라이브러리와 함께 사용할 수 있습니다. 크기는 작지만(종속성을 포함하여 2kB) 사용 가능한 애드온의 대규모 생태계가 있습니다.

The simplest way to pass data from a parent to a child in a React Application is by passing it on to the child’s props. But an issue arises when a deeply nested child requires data from a component higher up in the tree. If we pass on the data through the props, every single one of the children would be required to accept the data and pass it on to its child, leading to prop drilling, a terrible practice in the world of React. To solve the prop drilling issue in the world of REACT, we have State Management Solutions like Context API and Redux, but today we’ll focusing on REDUX.

👉https://redux.js.org의 REDUX 문서에 따르면

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

리덕스 사용법

앱의 전체 전역 상태는 단일 STORE 내부의 개체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 발생한 일을 설명하는 객체인 action 을 만들어 저장소로 보내는 것입니다. 작업에 대한 응답으로 상태가 업데이트되는 방식을 지정하려면 이전 상태와 작업을 기반으로 새 상태를 계산하는 순수 리듀서 함수를 작성합니다.

1단계 - REDUCER를 생성합니다.

import { createSlice } "@reduxjs/toolkit";
export const slice = createSlice({ name: "slice-name", initialState: { }, reducers: { func01: (state) = > { }, } }); 
export const { func01 } = slice.actions; 
export default slice.reducer;

2단계 - 상점을 구성하십시오.

import { configureStore } from "@reduxjs/toolkit"; 
import reducer from "./reducer"; 
export default configureStore({ reducer: { reducer: reducer } });

3단계 - STORE를 데이터 소비에 사용할 수 있도록 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App.jsx'
import store from './store';

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

4단계 - 상태 또는 디스패치 작업을 사용합니다.

import { useSelector, useDispatch } from 'react-redux';
import { func01 } from './redux/reducer';

const Component = () => {
 const reducerState = useSelector((state) => state.reducer);
 const dispatch = useDispatch();
 const doSomething = () = > dispatch(func01) 
 return (
 <>
 {/* ... */}
 </>
 );
}
export default Component;

결론

Redux Toolkit은 Redux에서 상용구 코드의 양을 줄이려는 초보자와 개발자 모두에게 훌륭한 옵션입니다. Redux 흐름과 패턴을 유지하면서 더 깨끗하고 읽기 쉬운 코드를 작성할 수 있습니다.

읽어 주셔서 감사합니다. 이 기사가 Redux를 이해하고 애플리케이션에서 Redux Toolkit을 사용하는 데 도움이 되었기를 바랍니다. 건배! 😀

질문이나 의견이 있으시면 아래 댓글 섹션에 자유롭게 남겨주세요 ✌

https://auraqule.hashnode.dev에 원래 게시되었습니다.