일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 제어컴포넌트
- twoarrow
- es6
- tailwindCSS
- QueryClient
- createPortal
- 함수형프로그래밍
- 조건부스타일
- BlockFormattingContext
- ㅡ
- 서초구보건소 #무료CPR교육
- BFC
- 부모패딩
- 화살표2개
- debouncing
- DOM
- useQueryClient
- transition
- accordian
- ignore padding
- alias설정
- ?? #null병합연산자
- 리액트
- react
- Carousel
- 문제해결
- vite
- parent padding
- 부모요소의 패딩 무시
- CustomHook
- Today
- Total
프론트엔드 첫걸음
Redux Toolkit 이해하기 - vanila javascript에서 써보기 본문
- Redux is for Javascript applications
리덕스는 리액트에 국한되는 것이 아니다.
앵귤러나 뷰, 자바스크립트에도 사용할 수 있는 자바스크립트 애플리케이션을 위한 라이브러리다.
-Redux is a state container
State는 앱의 모든 각각의 컴포넌트들이 공유하는 상태를 의미한다.
리덕스는 앱의 State를 저장하고 관리한다.
-Redux is Predictalble
리덕스는 애플리케이션이 업데이트 될 때 State 관리를 쉽게 한다.
예측가능하고 테스트 가능한 코드를 작성하도록 돕는다.
-Redux Toolkit
Redux의 구성이 복잡하고, 코드를 작성하기 위한 코드(boilerplate code)가 많이 필요하며, 다른 패키지들의 설치가 필요한 단점이 있다.
Redux Toolkit은 추상화되어 있으며 복잡함을 줄여 쉽게 개발할수있게 한다.
-React-Redux
React를 위한 Redux 공식 UI 바인딩 라이브러리
See the Pen Untitled by JEONG (@cona) on CodePen.
vscode에서 쓰려면
yarn add redux 설치 후 사용
createAction
const increase = createAction('INCREASE');
- 주어진 문자열에 대한 액션 생성자 함수를 생성한다.
- dispatch로 넘기는 액션의 type이 'INCREASE'일때 increase함수를 실행한다는 의미
createReducer
const counter = createReducer(0, {
INCREASE: (state) => state + 1,
DECREASE: (state) => state - 1,
});
switch 문을 대신한다. 초기상태와 액션생성함수를 매개변수로 받는다.
configureStore
const store = configureStore({ reducer: counter });
액션생성함수를 맵핑해서 store 에 저장
subscribe
const render = () => {
counterHead.innerText = store.getState().toString();
};
store.subscribe(render);
store의 상태가 업데이트 될 때마다 render함수가 호출 됨
리액트 프로젝트에서는 subscribe함수를 직접 사용하지 않는다.(컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux라이브러리가 이 과정을 대신함)
리액트를 다루는 기술 16장
리덕스의 세 가지 규칙
- 단일 스토어
: 하나의 애플리케이션 안에는 하나의 스토어 - 읽기 전용 상태
: 객체를 직접 수정하지 않고, 불변성을 유지하면서 새로운 객체를 생성해줌 - 리듀서는 순수한 함수
: 이전 상태와 액션객체를 파라미터로 받으며 파라미터 이외의 값에 의존하지 않음
이전 상태를 건드리지 않고 새로운 상태객체를 만들어 반환.
똑같은 파라미터로 호출된 리듀서함수는 언제나 똑같은 결과 값을 반환해야 함
* 리듀서 함수 내부에서 랜덤값을 만들거나, Date함수를 사용하여 현재시간을 가져오거나, 네트워크 요청을 한다면,
같은 파라미터에 다른 결과 나올수 있으므로 사용하면 안된다. 이는 리듀서 함수 바깥에서 처리해야한다.
네트워크 요청과 같은 비동기 작업은 미들웨어를 통해 관리한다.
https://redux-toolkit.js.org/introduction/getting-started
https://codesandbox.io/s/counter-vanilla-redux-toolkit-sjouq?file=/index.html
'개발 공부 > React' 카테고리의 다른 글
[Redux Toolkit Tutorial] bindActionCreator (0) | 2022.09.03 |
---|---|
[Redux Toolkit Tutorial] Cake shop Scenario (0) | 2022.09.01 |
[문제해결] 중괄호와 괄호 헷갈리지 않게 잘 쓰기 (0) | 2022.08.30 |
ContextAPI (0) | 2022.08.30 |
immer 사용법 (0) | 2022.08.29 |