인프런 커뮤니티 질문&답변

리덕스 툴킷을 사용하면서

dispatch().then()을 하면 then of undefined 에러가 나더라구요.

https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-results

공식 홈페이지 예제를 보고도 따라해보았는데 예제에 있는 방법들 모두 에러가 났습니다.

리턴을 return response.data;로 한 것이 문제였나 (프로미즈를 리턴하지 않고) 싶었지만

공식홈페이지 예제에서도 createAsyncThunc에서 return response.data 를 한 액션에 then()을 사용하더라고요.

어디가 문제였을까요! 제가 따라한 코드를 첨부합니다.

//store.js
import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
import reducer from './data_reducers/rootReducer';

const firstMiddleWare = (store) => (dispatch) => (action) => {
  dispatch(action);
};

const store = configureStore({
  reducer,
  middleware: [firstMiddleWare, ...getDefaultMiddleware({serializableCheck: false})],
  devTools: process.env.NODE_ENV !== 'production',
});
export default store;

//axios.js
import axios from '@/axios';
import {BASEURL} from '@/App';
import {authToken} from '@/service/auth/auth.service';
import {createAsyncThunk} from '@reduxjs/toolkit';

export const fetchUserById = createAsyncThunk('users/fetchByIdStatus', async (userId, thunkAPI) => {
  let response = await axios.get(`${BASEURL}/test/`, {
    headers: {
      Authorization: 'Bearer ' + authToken(),
      'Content-Type': 'application/json',
    },
  });
  return response.data;
});




//reducer.js
import {
  fetchUserById,
} from '@/data_actions/userInfo_action/userInfo_action';
import {createSlice} from '@reduxjs/toolkit';
import {fetchUserById} from '@/data_actions/userInfo_action/userInfo_action';

const initialState = {
  isLogging: true,
  profile: null,
  isError: false,
  status: '',
  errorStatus: {},
};

export const userInfoSlice = createSlice({
  name: 'userInfo',
  initialState,
  reducers: {
    resetStatus(state, action) {
      state.status = '';
      state.errorStatus = {};
    },
  },
  extraReducers: (builder) => {
    builder.addCase(fetchUserById.fulfilled, (state, action) => {});
  },
});

//component
import React, {useEffect, useRef, useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {unwrapResult} from '@reduxjs/toolkit';

function MyAccount(props) {
const dispatch = useDispatch();

  const onClickk = async () => {
    dispatch(fetchUserById())
      .then(unwrapResult)
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {});
  };

  return (
        <button onClick={onClickk}>test</button>
  );
}