Redux (4) 썸네일형 리스트형 Redux Toolkit State를 리셋하는 방법 리덕스 툴킷은 immutable한 state를 내부적으로 mutable하게 사용한다. 때문에 state를 리셋하기 쉽다고 생각할 수 있는데 버전이나 설정에 따라서 잘 작동되지 않는 경우가 더러 있다. slice 코드의 state에 initialState를 넣더라도 잘 안 된다. reducers: { reset(state) { state = initialState; } } 아래 링크에서 여러가지 방법들을 제시하는데 https://stackoverflow.com/questions/59424523/reset-state-to-initial-with-redux-toolkit 필자는 object assign을 써서 해결할 수 있었다. reducers: { reset(state) { Object.assign(stat.. Redux의 코드를 간결하게 해주는 @reduxjs/toolkit redux를 사용하면 코드가 복잡해지는 단점이 있다. @reduxjs/toolkit를 쓰면 이를 해결 할 수 있다. Basic @reduxjs/toolkit을 쓰는 간단한 예제다. github.com/socratone/simple-redux-toolkit configure.js는 redux의 store에 해당한다. configureStore 메소드를 써서 store를 생성하면 redux dev tools 설정을 자동으로 해주고 dispatch를 비동기적으로 처리할 수 있다. bugs.js는 redux의 reducer에 해당한다. createSlice 메소드를 써서 보다 간결하게 reducer를 구현할 수 있다. 각 action을 처리하는 함수에서 원래는 state를 deep copy 해야 하지만 내부적으.. Redux 기본 사용 방법 redux는 크게 action, store, reducer로 구분된다. store를 중심으로 돌아간다고 생각하면 쉽다. npm i redux 명령어로 redux를 설치한 뒤 먼저 store 모듈부터 만들자. const { createStore } = require('redux'); const reducer = require('./reducer'); const store = createStore(reducer); module.exports = store; // store.js로 저장 store를 만들 때 reducer라는 함수를 넣는 것을 볼 수 있다. store에 저장된 값인 state를 변경할 때 이 함수를 사용하기 때문이다. 이를 위해 reducer 모듈도 만들자. let lastId = 0; // .. immutable하게 데이터를 수정하기 위한 라이브러리 - immer 사용법 리덕스는 데이터를 immutable 하게 수정한다. 때문에 데이터를 수정하려면 Object.assign이나 spread operator를 사용해야 한다. 그러나 객체 안의 객체까지 deep copy를 하려면 코드가 지저분해질 수밖에 없다. const person = { name: 'socratone', address: { country: 'korea', city: 'seoul' } }; const updated = { ...person, address: { ...person.address, // 윗줄의 address가 같은 객체를 가리키지 않도록 city: 'nonsan' // city를 nonsan으로만 바꿨다. } }; deep copy를 하기 위해 객체를 거의 새로 쓰다시피했다. 이런 복잡함을 줄이.. 이전 1 다음
