웹

[A non-serializable value was detected in the state] 에러 해결하기 (Redux-toolkit)

직렬화되지 않은 상태나 액션이 있을 때 나타나는 에러이다. 리덕스 툴킷에서는 개발 환경에서 기본적으로 미들웨어를 활성화하여, 직렬화되지 않은 상태 혹은 dispatch 하는 것에 대해 경고를 한다. 근데 내 애플리케이션에서 데이터를 주고 받을 때는 딱히 직렬화가 필요없기 때문에 이러한 설정을 끄면 경고를 없앨 수 있다. 나는 store를 저장하는 파일을 따로 가지고 있었기 때문에 해당 파일에서 아래 코드를 추가했다. // ../redux/store.js configureStore({ reducer: rootReducer, devTools: process.env.NODE_ENV !== 'production', /** 요기 부분 추가 */ middleware: (getDefaultMiddleware) => ..

2024. 1. 22. 22:51

웹

Redux Toolkit 으로 상태 관리하기

전역상태 관리가 필요한 이유 리액트에서는 상태를 통해서 UI에 있는 정보를 업데이트하고 쉽게 렌더링 할 수 있는데 아무 상태나 막 생성하다보면,, 한 함수 안에서 엄청 여러개의 상태값을 변경하고 있는 걸 볼 수가 있다. 그리고 상태값을 사용하거나 상태값을 세팅하기 위해서 자식컴포넌트로 계속 내려주는 일이 생길 수도 있다. 그런 문제점을 차단하기 위해서 많이 쓰이는 전역 상태들은 여러 라이브러리로 관리할 수가 있다. 여기에서는 리덕스로 관리하는 법에 대해서 정리를 해보고자 한다. 사용법 1. createSlice() const { createSlice } = require('@reduxjs/toolkit') 리덕스의 메서드로, 이니셜 상태, 리듀서 함수 객체, 슬라이스 이름 등의 정보를 받아 슬라이스를 만..

2024. 1. 17. 20:04