# reducers

h6325g

2월 18일 여정 41일차이다. 오늘은 Redux의 리듀서에 대해 코드를 보면서 더 자세히 알아보려한다. 오늘의 Today I Learned 기본적으로 react-redux랑 redux-toolkit은 서로 차이점을 가지고 있다. 순수 리덕스와 리덕스 툴킷의 가장 대표적인 차이점은 리듀서라는 곳에서 시작된다. 리듀서는 입력값이 dispatch에서 액션이라는 것을 통해 전해졌을 때, 전해진 값이 수정되는 곳이다. 그럼 바로 코드를 보자. 위는 리엑트 리덕스의 리듀서이다. initialState는 아무것도 없는 배열로 시작한다. 그러나 리액트 리덕스에서 중요한것은 불변성을 지키는 것이다. 이 부분을 잘 보면 이전 값인 state를 놓는 것을 볼 수 있다. 이 부분 역시나 이전 값인 state를 스프레드 문법을 사용하여 넣어준 것을 볼 수 있다. 위의 코드 역시 배열 안에 이전의 state 값을 넣어준 것을 볼 수 있다. 반면에 툴킷을 보자.

rawoon

redux 로 관리하고 있는 state 의 값을 바꿔줄 필요가 있었다. 유저의 팔로우 여부 데이터를 바꿔줘야 했었는데, api 요청을 보내면 db에는 잘 바꿔져서 들어가지만, 화면단에서 매번 새로 데이터를 불러오기보다는 관리하고 있는 state 의 값을 바꿔주기로 마음먹었다. 그래서 아래의 코드처럼 store 폴더안, modules 폴더에서 필요한 부분을 바꿨다. 그랬더니 이런 보기 싫은 Immer 에러가 떴다. 검색해보니 [@reduxjs/toolkit 공식문서](https://redux-toolkit.js.org/usage/

ppmyor

🗂 구조 변경 기본 구조에서 원하는 구조로 변경했다! 📂 \actions, \reducers actions과 reducer는 redux를 위한 폴더 📂 components/views 해당 폴더 안에 원하는 페이지들을 만든다. 📂 LandingPage/📄 LandingPage.js 📂 LoginPage/📄 LoginPage.js 📂 NavBar/📄 NavBar.js 📂 Footer/📄 Footer.js 📂 RegisterPage/📄 RegisterPage.js 📄 App.js 라우팅에 관련한 것들을 처리한다. 라우팅이란 html로 치면 a 태그 같은 개념인데 로그인 페이지로 가고 싶다면 로그인 페이지로 보내주고, 랜딩 페이지로 가고