초보자를 위한 React Redux

REDUX란 무엇입니까?



Redux는 많은 프로그래밍 언어와 함께 사용되는 상태 관리 시스템입니다. React에서 Redux는 CONTEXT API의 대체품으로 사용됩니다.

REDUX의 핵심 원리...



0. 진실의 단일 출처:
애플리케이션의 전역 상태는 한 곳에 저장됩니다.

1. 상태가 읽기 전용입니다.
상태를 변경하는 유일한 방법은 조치를 내보내는 것입니다.

2. 순수 함수로 변경:
순수 함수는 두 가지를 취하는 REDUCERS로 알려져 있습니다.
인수, 하나는 이전 상태이고 두 번째는 작업입니다.
이전 상태는 전달된 작업과 새 작업으로 평가됩니다.
상태가 반환됩니다.

React-Redux용 저장소 생성



 createStore() function is used to create a store which is 
 imported from redux library and this function accepts a 
 reducer function.



감속기 함수 만들기



A reducer function is a normal function which accepts two 
arguments, a previous state and an action payload. Based on 
the evaluation of these two arguments, the reducer function
returns a new state.



REDUX 저장소 파일



React-Redux를 사용한 카운터 관리 시스템의 예.



루트 구성 요소에 REDUX 저장소 제공



Provider component imported from "react-redux" library is used
to provide the REDUX store to the root component. The Provider 
component acts as a wrapper component and wraps the root 
component of the application. The Provider component has a 
"store" attribute to accept the REDUX store which establishes
the connection between Provider and REDUX store.

The child components of the root component are also exposed to
the REDUX store when the Provider component wraps it.



REDUX 저장소에서 상태 데이터 액세스



useSelector() hook imported from "react-redux" library is used
to tap into the REDUX store to access state data.
useSelector() does strict === reference equality checks.
useSelector() can be called multiple times within a single 
function component.



REDUX 저장소에 작업 전달



useDispatch() hook imported from "react-redux" library is used 
to dispatch actions to the REDUX store.
Behind the scenes when an action is dispatched, useSelector()
does a reference comparison of the previous selector result
value and current result value. If they are different, the 
component is forced to re-render.

좋은 웹페이지 즐겨찾기