# reduxtoolkit
[Redux] 리덕스로 비동기 코드 구현하기 2
비동기 코드구현에 이어서 Thunk를 생성했고, 해당 프로젝트가 로드될때 cart데이터를 서버로 부터 가져오는 걸 적용해 보자. 데이터 가져오기(Fetch) 현재 앱에서는 로드될때 데이터를 패칭하지 않아서 리로드하게되면 모든 상태가 손실되어 있게된다. 따라서 데이터 fetching하는 비동기 로직도 추가로 생성해야한다. 현재 cartSlice의 파일이 커지고 있기에 파일을 분리하여 기존에 있었던 sendCartData Thunk함수를 cart-actions.js로 빼내어 주었다. 그리고 나서 서버로부터 데이터를 가져올 fetchCartData함수도 생성해 주었다. cart-action.js fetchCartData
[Redux] Redux Toolkit 적용하기
Toolkit이 나온 배경 프로젝트가 더 복잡해지면서 리덕스의 사용성도 복잡해지기 마련이다. 즉, 리덕스에서 관리해야할 상태들이 점점 더 많아질때를 의미한다. 가장 크게 두드러지는 부분은 1. Action type : 리듀서에서 받는 엑션의 타입의 식별 형태가 여러 개발자가 같이 작업하고 서로 다른 엑션이 많을때, 오타가 나거나 충돌이 일어나게 될 수도 있다. -> 이를 해결하기 위해 엑션생성자 함수를 한번만 정의해놓고 사용했다. 2. 데이터 양 : 관리하는 데이터의 양과 관련이 있다. 상태가 많을수록, 반환되는 상태 객체도 점점 비대해진다. 그말은 즉, 많은 상태를 복사해야하고, 그렇담 리듀서 함수의 로직 길이도 매우 길어질테다. ContextAPI의 복잡성을 대체하려 리덕스를 사용하는 이유가 불분명해질 수 있다는것이다. 해결방법 **리듀서 분리(Reducer Splittin
Redux-Toolkit 연습하기
리덕스 툴킷 간단 설명 리덕스 툴킷은 상태관리 라이브러리인 리덕스의 문제점을 보완하기 위해 만들어졌다. > store에서 state를 구독하여 어떻게 변경시킬지에 대한 정보를 담아서 action이라는 객체를 만든다. 그리고 그 action을 dispatch(처리될 작업을 실행시키고 보내는 것)해서 reducer에 넘겨준다 reducer는 action의 정보를 보고 state를 정해진 규칙에 따라 변경한다. > 최종적으로는 전역state가 변경되고 해당하는 state를 구독하던 component들은 리렌더링된다. 하지만 이러한 리덕스에는 여러 불편한 점이 있었다. > 1. 기존 redux는 리덕스 스토어를 구성하는 것은 너무 복잡했다. 너무 많은 패키지를 설치해야했다. (redux
NextJs AppRouter Dynamic Routes
NextJs의 13버젼 이후 Dynamic Routes 13버젼의 AppRouter에서 조금은 혼동할 수 있는 Dynamic Routes를 정리한다. 먼저 이전 PageRouter방식이다. 쉽게 생각하면 하위 url을 폴더로 그리고 그 속에[params.name].js파일을 만들어 이를 변수 = useRouter() 함수로 가져오고 변수.query.params.name 통해 사용했다. > pages/blog/[slug].js AppRouter방식에서는 이전page방식과 다르게 [params.name]폴더를 만들고 > app/blog/[slug]/page.js 아래처럼 parameter를 params로 만들어 바로 가져와 사용할 수 있다. 확실히 AppRouter은 조금 더 정확한 구조를 만들어서 한눈에 파악하기 편하도록 만들었다.
[Redux Toolkit] 독후감 추가 기능 구현하기
구현하려는 기능 서재에서 독후감 작성을 원하는 책을 클릭했을 때 독후감 작성 화면으로 넘어간다. 독후감 작성 화면에는 현재 클릭된 책의 타이틀과 독서상태가 보여지고 독후감을 작성할 수 있는 Textinput이 보여진다. 독후감 등록 버튼을 클릭하면 현재 책 데이터에 독후감(content)과 작성 시간(date)가 추가된다. reducer 작성 리듀서는 클릭한 책의 정보를 받아오는 setSelectedBook과 독후감을 추가하는 addReport로 나누었다. 안되는 부분 
Redux Toolkit - thunk
리덕스 툴킷에서는 비동기 작업을 어떻게 처리할까. CreateAsyncThunk API CreateAsyncThunk({action type}, {action creater가 호출됐을 때 실행할 함수}) CreateAsyncThunk는 비동기 작업을 처리하는 action을 만들어준다. asnyncUpFetch는 액션 크리에이터이기 때문에 타입이 있어야 한다. 액션이 실행됐을 때 처리되어야 하는 작업(서버 접속, 결과 가져오기)을 리턴하는 값을 두번째 파라미터의 함수로써 전달했다. 비동기 작업은 세 가지의 상태가 있다. pending (대기) fullfilled (성공) rejected (오류
한 주의 정리 - WIL
이번주(2월 13일 ~ 2월 19일) 리액트 숙련과정부터 리액트 심화과정까지 생각보다 어렵고 생각치도 못한 것들이 많이 일어났던 한주였다. 이번주 Weekend, I Learend **1. 리덕스 액션은 어떤 행동을 뜻한다. 액션은 하나의 객체이다. 액션에 type은 필수이다. 액션 생성 함수는 액션을 만드는 함수이다. 파라미터를 받아와서 액션 객체 형태를 만든다. 리듀서는 값을 변형하는 공장이다. 리듀서에는 state라는 이전값과 action이라는 새로운 값 2개의 인자를 받는다. 디스패치는 액션으로 값을 전달하는 역할을 한다. 구독은 스토어에 있는 값을 볼 수 있게 도와준다. useSelector를 사용한다.** **2. 리덕스는 한개의 어플리케이션에 하나의 스토어가 존재한다. 리덕스의 상태는 읽기 전용으로 기존 상태를 두고, 새로운 상태를 성성하여 업데이트를 해야한다. 리듀서는 순수한 함수여야한다. 즉 입력데이터와 출력값이 같아야 한다.** **3. vritu
Redux Toolkit 정리
리덕스 툴킷을 배우려면 우선 리액트 리덕스의 동작 원리에 대해 간단히 알아야 한다. 🟣 왜 Redux 일까? > 리액트에서 상태관리를 할 때, => 쉽게 말해 props를 전송하고 state의 데이터를 수정하고 싶을 때, 별다른 방법이 없다면 부모 컴포넌트와 자식 컴포넌트로 이어진 수 억 개의 props를 전달하기 위해 수 억 개의 코드를 일일이 생성하거나 수정해야 한다. 리덕스는 이러한 과정을 축약하고 단순하고 편리하게 상태 관리를 할 수 있게 만드는 도구이다. 하위 컴포넌트에 있는 state와 state를 바꾸는 event를 (유선->)무선으로 간편하게 연결하고 싶다면! 그 꿈을 실현해주는 도구가 redux. 리덕스를 사용하면 사용하는 해당 state의 값만 바뀌고 상위 컴포넌트들은 리렌더링 되지 않는다. ➡️ 리액트를 사용하며 생산성이 높아지는 효과 리덕스,
TS, next.js, redux tool-kit 개념 간단 정리
공부는 필요할 때 하는 게 제일이라고 하셨다.. 본격적인 개발에 들어가기 앞서 다음 나열한 정적 언어, 프레임워크, 라이브러리 모두 처음 배우며 하다 보니 간단한 정리가 필요했다. TypeScript 공식 문서 바로가기 > TypeScript is JavaScript with syntax for types. 타입 스크립트는 유형에 대한 구문(타입 구문)이 있는 자바스크립트이다. |Javascript|Typescript| |:------:|:------:| |동적 언어|정적 언어 | |런타임에 타입이 결정되고 오
[React] Redux toolkit 02
✅ State 변경하기 createSlice에서 state 수정 함수 만들고, 원할 때 그 함수 실행해달라고 store.js에 요청 순서대로 봐보자면 state 수정 함수 만들어주기 만든 함수 export 해주기 컴포넌트에서 useDispatch와 함께 import 해서 사용 useDispatch는 store.js에 요청을 보내주는 함수 useDispatch는 요청만, 실행은 store.js가!! import 하기 사용하기 방법이 다소 복잡해 보이는데, 정해진 형식이라 어쩔수 없음 그리고 사실상 사이즈가 커지다보면 버그 방지등 장점이 많음 => 다양한 컴포넌트가 state를 직접 수정하려다보면 버그 발생시 원인 찾기 어려움 => 수정함수를 통하면 버그 추
[React] Redux toolkit 01
✅ Redux가 뭐죠? Cart 컴포넌트 만들고, 테이블로 표시해줌 여기에 장바구니 데이터를 보여주고 싶음 데이터를 state로 관리 해야겠지? 그런데 해당 state가 app, detail 등 다양한 곳에서 사용된다고 가정해보면, => state는 최상위인 app에 생성을 해야함 => 근데 사실 이렇게 하면 또 props 전송이 귀찮다 => 이를 편하게 해주는 🌟 Redux 🌟 Redux 사용하면 컴포넌트들이 props 없이 state 공유 가능 => redux store.js 에 state를 모아서 관리 => 모든 컴포넌트들에서 꺼내다 쓸 수 있음 먼저 확인 하나 => package.json (여러 라이브러리 버전 정보 등 담고있음) => react와 react-dom이 18.1버전 이상이어야 redux 정상적으로 작동 이번 파트는 TypeScript가 적용되지 않은 js 및 jsx
Redux부터 react-redux , redux toolkit 까지
Redux란? 과거 프론트엔드는 전역 데이터를 관리하는 방법이, 상위 element에서 하위 element로 값을 보내주고, 하위 element에서 데이터의 수정이 발생하면 상위 element로 업데이트 해주는 MVC 아키텍쳐 방식이었습니다. 그러나, 2014년 페이스북의 채팅 버그로 인해 데이터가 단방향으로 흐르고, 데이터의 변화를 예측할 수 있는 방법을 고안하게 되었습니다. 그 결과 Flux 아키텍쳐가 고안되었고, redux는 flux 아키텍쳐를 구현하기 위해 탄생되었습니다. redux를 사용하면, 위와 같이 데이터의 변화가
redux toolkit은 무엇일까?
리덕스를 배웠다면 바로 배워야 될것이 리덕스 툴킷이다. 오늘은 리덕스 툴킷에 대하 알아보겠다. 리덕스 툴킷이 왜나왔을까? 불필요한 형식적인 코드들이 많았다는게 리덕스의 단점이다. 이런 단점을 보완하려고 코드는 더 적게 더 편하게 사용하자고 리덕스툴킷을 개발했다. 리덕스 설치법 리덕스 vs 리덕스 툴킷 둘 차이점을 알아보자 리듀서 부분 리덕스툴킷 코드 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점 Slice 라는 API를 사용해서. 저 3개를 각각 만들어줄 필요 없이 한번에 3개가 모두 만들어진다. 컨피그스토어 부분 밑에는 바뀐부분 그 외 부분 다 똑같다 인덱스.js 부분이랑 앱 부분은 요약 리듀서 부분 *이니셜스테이트, 리듀서만 남음
<React> redux middleware
리덕스는 비동기적인 작업을 할 수 없다 리덕스를 이용해서 비동기적 작업을 하기 위해서는 리덕스 미들웨어라는 컨셉이 필요하다 미들웨어 ===>중간에서 가로채는 느낌 더 쉽게 이야기해서 async와 같은 비동기 함수들은 미들웨어에서 다뤄주면 된다!! 리덕스 미들웨어 라이브러리 종류 redux-saga redux-thunk ----> 저는 적용하기 쉬운 이거 배워볼게요! 설치 npm install redux-thunk 적용 action폴더에서 미들웨어 함수를 저장할 공간을 따로 만들어준다 예시))async-await으로 작업한 api를 redux 미들웨어로 사용하기 위해 바꾸는 방법 1. store.js는 위와 같이 미들웨어를 추가하여 작성한다 *
<React> redux
👩🏼🌾👩🏼🌾 리덕스툴킷 포스팅보러가기!! redux toolkit이 나오기 전, Redux를 세팅하고 적용하는 방법에 대해 포스팅해보겠다 함께 Redux toolkit과의 차이점에 대해 알아보겠다! Redux 설치 Redux를 js에서 사용하기 위한 설치 npm install @reduxjs/toolkit Redux를 React에서 사용하기 위한 설치 npm install react-redux redux와 react를 위한 redux한번에 설치 npm install redux react-redux 아래와 같이 scr폴더에 redux폴더를 따로 생성해주고 store.js파일과 reducer폴더를 만들어 기본세팅을 해준다 <img src="https://velog.velcdn.com/images/yezee/post/66913244-8de7-416f-b
Redux Toolkit 기초
🔧 Redux Toolkit 다뤄보기 이제까지 노마드코더의 redux 강의를 따라왔다면, createStore function에서 아래 이미지와 같이, createStore에 줄이쳐지며 configureStore 메소드를 사용하길 권장한다는 메세지를 확인할 수 있다. 이번 포스트에선 안내 메세지처럼 configureStore를 비롯해 Redux Toolkit 라이브러리가 가진 효율적인 function과 method들을 알아보고자 한다. createAction() 가장 먼저 살펴볼 method는 createAction()이다. 기존의 코드가 Action type 반환과 그 내용을 반환해야했다면 아래처럼, redux-toolkit을 통해 2줄의 코드로 압축할 수 있다.
<React> 장바구니기능만들기+ReduxToolkit
🛒 장바구니 수량증가 기능 구현하기 목표: 장바구니page에서 각 제품별 수량증가 버튼을 누르면 해당 제품 수량 증가할 수 있도록 한다 장바구니 수량 상태변화를 위한 함수로 addCount함수를 만들었다 addCount(state,action){state[action.payload].count++}로 값을 주고 장바구니 페이지에서 onClick={()=>{dispatch(addCount(i))}}로 클릭이벤트를 주면 (이때 i는 map을 돌려서 받은 각각의 Index값) 잘 동작한다 하지만 filter나 sort를 잘못해서 상품의 순서가 바뀌게 되면 불상사(?)가 발생된다 따라서 정확성을 위해서는 "더하고 싶은 상품 id를 가져와서 똑같은 id를 가진 상품을 기존state에서 찾아서 +1"하도록 동작시켜야한다 그래서 버튼을 누르면 action.payload값으로 아래의 값을 파라미터로 전송 `onClick={()=>{dispatch(addCount
<React> Redux toolkit
why Redux? Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리 설치하면 js파일 하나에 state들을 보관할 수 있게된다!! 역시 시작은 설치! 설치하러 가보자~! npm install @reduxjs/toolkit react-redux 를 터미널에 입력 (주의사항: package.json에서 "react", "react-dom" 가 18.1버전이상인지 꼭 확인해야한다) 리덕스 툴킷 세팅 src폴더에 store.js파일을 만들어 아래 코드를 넣어준다 앞으로 이 store.js파일은 state를 보관하는 파일이 된다 index.js파일에 가서 Provider라는 컴포넌트와 아까 작성한 파일을 import한다 `을 `으로 감싼다 이제 ``과 자식 컴포넌트들은 store.js에 있는 state를 맘대로 꺼내쓸게 있게 된다 st
reduxToolkit 과 redux-persist 쓰는 법
리액트에서 상태관리는 항상 새로고침이나 재랜더링시 저 멀리 날아가버린다. 우리에겐 두가지 선택지가 있다. 1.local storage를 써서 useEffect훅을 이용해 state가 텅 비어있다면 localstrage.getItem을 이용하여 key값을 매칭해 value를 불러오는것(물론 이렇게 하면 처음 state변경시 setitem으로 저장도 해줘야한다 끼얏호우) 2.redux-persist를 활용하여 날먹을 하는 방법 지금까지 1번으로 해 왔는데 상당히 매우매우 귀찮다. 물론 2번 방법을 몰랐던건 아니다. 근데 왜 1번으로 했는가? 난 영어를 싫어했고, 공식문서를 읽기 싫었기 때문이다. 하지만 악깡버 하다 결국 오늘 결심했다. "써야징" 1.설치한다 > # NPM npm install @reduxjs/toolkit 이렇게 설치하랜다 하자. 2.폴더 만들자 src하위 폴더로 redux를 만들고 reducer를 처리할 폴더 하나, config