[Redux] 리덕스 툴킷 redux-toolkit

https://redux-toolkit.js.org/

Redux Toolkit | Redux Toolkit

https://soyoung210.github.io/redux-toolkit/tutorials/basic-tutorial/

Redux Toolkit

위 두개는 거진 리덕스 툴킷을 정리한 내용이다. 하지만 내용이 너무 복잡하고, 이것 썼다 저것썼다해서 헤깔린다.

이미 이해를 하고나서 내용을 정리하고자 공식문서 링크를 찾던 도중 발견한 사이트.

작성일이 9월이더라.

http://blog.hwahae.co.kr/all/tech/tech-tech/6946/

Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?

내용이 굉장히 잘 정리되어 있어 가져와 봤다.

위 내용에서도 

createStore는 configureStore로

combinereducer는 createSlice를 쓰길 권장하고 있다.

기존에는 state를 직접접근이 가능해 immer 라는 라이브러리를 통해 불변성을 지켰지만, 지금은 내장되어 이를 거칠 필요가 없다.

 

이렇게 되면 이전에 올렸던 코드와 다르게

if문을 쓸 필요가 없고, 그냥 해당 스토어에서 action 호출한 변수를 끌고 오면 된다.

뭔말인거냐 하면

// store.js
export const counterActions = counterslice.actions;

// counter.js
import { counterActions } from '../store'; //정확히는 /store/index.js인데 기본적으로 index가 있으면 읽어줘서 작성하지 않았다.

const handelr = () => {
	dispatch(counterActions.해당 함수명()); // 하면 된다.
}

Error: The slice reducer for key "counter" returned undefined during initialization. 

If the state passed to the reducer is undefined, you must explicitly return the initial state. 

The initial state may not be undefined. 

If you don't want to set a value for this reducer, you can use null instead of undefined.

 

configureStore에서 configureStore({ reducer: counterslice.reducer })인지 확인해라 counterslice.reducers로 적는 바람에 발생한 에러였다.

 

Error: "reducer" is a required argument, and must be a function or an object of functions

that can be passed to combineReducers

 

별건 아니었고 createSlice 함수 내 state를 제대로 주고 있는지 확인해라. 내 경우 인자를 return값에선 적어놓고 인자부분에서 적지 않아 발생했던 에러였다.