42. redux-toolkit 오류 정리

Mission: redux-toolkit 오류 정리 및 해결 방법

에러:
Invariant Violation: Could not find "store" in the context of "Connect(App)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(App) in connect options.

원인:
Redux store를 전역으로 제공하지 않아서 발생하는 에러이다.

해결방안:

• Redux의 Provider로 감싸고, connect 함수를 사용하여 컴포넌트를 Redux store에 연결한다.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "@reduxjs/toolkit";
import rootReducer from "./reducers";
import App from "./App";
const store = createStore(rootReducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

에러:
Cannot read property 'map' of undefined

원인:
Redux store에서 posts 배열이 초기화되지 않아서 발생하는 에러이다.

해결방안:

• 초기 상태를 정의할 때, posts 배열을 빈 배열([]) 또는 초기 데이터를 가진 배열로 초기화한다.

에러:
Actions must be plain objects. Use custom middleware for async actions.

원인:
Redux store를 전역으로 제공하지 않아서 발생하는 에러이다.

해결방안:

• Redux 미들웨어 중 redux-thunk나 redux-saga와 같은 미들웨어를 설치하고, 비동기 작업을 처리하는 액션 생성자를 만들어야 한다.

에러:
Actions may not have an undefined 'type' property. Have you misspelled a constant

원인:
액션 객체에 type 속성이 지정되지 않았거나, 오타가 있어서 액션 타입이 정의되지 않은 경우 발생한다.

해결방안:

• 액션 생성자에서 액션 객체를 생성할 때, 반드시 type 속성을 지정해야 한다. 또한 액션 타입을 상수로 정의하고 오타를 방지해야 한다.

// postsSlice.js
import { createSlice } from "@reduxjs/toolkit";
const postsSlice = createSlice({
  name: "posts",
  initialState: [],
  reducers: {
    addPost: (state, action) => {
      const newPost = action.payload;
      state.push(newPost);
    },
  },
});
export const { addPost } = postsSlice.actions;

에러:
Error: Reducer "posts" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state.

원인:
초기 상태를 정의할 때 undefined를 반환하는 경우에 발생하는 에러이다.

해결방안:

• 초기 상태를 정의할 때, undefined 대신 실제 초기 상태 값을 반환해야 한다. return state와 같이 초기 상태 값을 반환해야 에러가 발생하지 않는다.