Today Sangmin Learned
article thumbnail
[Redux] @reduxjs/toolkit의 사용방법
Web/Redux 2022. 1. 12. 17:24

기본적인 Redux 사용방법에 대해서 알아봤다. 이제 이 Redux를 좀 더 편하게, 그리고 가볍게 사용할 수 있는 @reduxjs-toolkit 패키지에 대해 알아보고자 한다. 1. 다운로드 npm install @reduxjs/toolkit yarn add @reduxjs/toolkit 둘 중에 편한 것으로 하자. 그리고 기존에 Redux가 설치되어있는 프로젝트라면 package.json에 들어가서 Redux를 삭제하자. 왜냐면 @reduxjs-toolkit에는 Redux의 모든 게 다 들어가 있기 때문이다. 2. 적용 이제 필요한 곳에 사용해보자. 여기서는 createSlice와 configureStore을 사용할 것이다. 예시는 마찬가지로 counter이다. 이 gif를 보면 증가, 5만큼 증가,..

article thumbnail
[Redux] Redux의 기본 흐름
Web/Redux 2022. 1. 12. 14:44

이번에는 Context API의 대안으로 떠올랐던 Redux의 기본 흐름에 대해서 살펴보려고 한다. 가장 쉬운 예시인 숫자 증가/감소로 설명하겠다. 1) Redux를 불러온다. const redux = require('redux') 2) 스토어를 만든다. const store = redux.createStore(""리듀서 이름"") 리덕스 라이브러리에 노출되는 방법이다. 파라미터로 리듀서가 들어가는데, 이는 어떤 리듀서가 스토어를 바꾸는지 스토어가 알아야 하기 때문이다. 3) 스토어에 들어갈 리듀서 함수를 작성한다. // 1 const counterReducer = (state = { counter: 0 }, action) => { // ... } // 2 const initialState = { cou..