Redux

환경State구조의 변화React === JS이므로 JS를 알면 React도 알 수 있을것이다.우선 환경부터 살펴보자준비물 JS, webpack, node, npm(redux) 위 준비물의 환경과 서로를 연결하는 방법은 이전 포스트에 정리해 두었다.이제 npm에서 re

redux store의 분리state를 따로 관리하는 redux에서 store가 index.jsx, App.jsx 등에 섞여있다면이는 따로 관리하는 최대의 장점을 훼손하는 일이다.이를 분리해 따로 관리를 해보자.방법은 간단하다.store.js를 생성해 store, re

React에서 Redux 사용하기개념을 먼저 잡아주자.createStore는 인자로 reducer를 받는다reducer는 함수이다.reducer는 인자로 state, action을 받는다.state는 Redux에서 관리할 state값이고 action은 dispatch를

Redux를 통해 state값을 관리하는 카운터 Redux에 의존하는 component에서 Redux분리하기!codesandboxelegant-gagarin-qgrhp?fontsize=14&hidenavigation=1&theme=dark위의 codesandbox 예제

combineReducersHow to useredux를 사용하여 데이터를 중심으로 구조를 나누다 보면reducer는 쪼개지지 못한채 계속 키가 커져간다.reducer도 쪼갤 수 있다.reducer를 쪼갠 뒤 마치 webpack처럼 묶어주는 combineRedcuers

주의할 점주의할 점이라는 것은 이것이다.위 코드의 문제점은 무엇일까?prettier가 이쁘게 정돈하고 vscode도 아무런 문제가 없다고 한다.문제점은 바로 default값이다.이미 객체인 initialState를 다시 객체에 담아 리턴을 해주므로 우리가 원하는 대로의

소개소개: redux store, reducer, dispatch, getState와 같은 redux의 flux 시스템의 핵심적인 내용을 최대한 알기 쉽게 간결하게 짜본 코드입니다.작동원리를 이해하기 쉽습니다.!codesandboxpedantic-perlman-gkf2

store를 나누자예시중요한 점간단한 Redux를 설정하는데도 많은 줄의 코드가 필요하다.아래의 간단한 store만 해도 logIn, logOut, add post 기능 3개만을 관리하는데 90줄에 가까운 코드가 쌓이게 된다.코드가 길면 해독이 어렵고 정신이 혼미해지다

redux thunk 이해하기사용해보기redux에서 middleware를 사용해 비동기 처리를 하기 위해서는 어떤 과정을 거치면 될까?그보다 어떤것을 비동기 처리해야 하는지부터 알아보자.redux는 기본적으로 상태관리 툴이다. 버튼을 누르면 1초 뒤에 dispatch

middleware란 무엇인가.작동방식기존의 redux의 작동방식은store의 값을 변화하시키는데 이러한 과정을 거쳤다.dispatch로 action값을 reducer에 넘긴다.reducer는 값을 받아 store에 넘기고 store는 reduce한 값을 반환해 ini

Async의 추가이전 포스트에서Async 동작을 추가해보도록 하자.기존의 Redux에선 middleware를 만들고 내부에 thunk 혹은 saga를 사용하여 비동기 처리를 했다면redux toolkit 기본 튜토리얼에서는 이렇게 처리하는 모습을 보여준다.!codesa

firebase logIn ? redux toolkit을 사용하자.우선 firebase login 방법은 노마드 코더 선생님께서 잘 알려주신 강좌가 있으니 꼭 보도록 하자.우린 여기에 redux를 얹어 상태관리를 조금 더 타이트하게 해보려 한다.우선 firebase는

createAsyncThunkcreateAsyncThunk는 함수이며 말 그대로 async 함수를 수행한다.createAsyncThunk 함수는 두 가지 인자를 받는다.action type stringcallback functionaction type string =

boiler plate 1. 예시는 counter 예시로 한다. 2. useSelector, useDispatch selectCounter, setCounter에 대해 알아보자. setCounter는 setState처럼 setter의 역할을 한다. selectCo