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

안녕하세요 선생님

상황) 리덕스 실제 구현하기 부분을 따라하던 도중 configureStore.js에서 createStore 단어 가운데에 취소선이 생기면서 @reduxjs/toolkit의 configureStore로 대체를 권장한다고 뜨는 상황입니다.

import {createStore} from 'redux';

import reducer from '../reducers'; 


const configureStore = () => {
    const store = createStore(reducer);
    store.dispatch({
        type:'CHANGE_NICKNAME',
        data:'luckyhaejin'
    });
    return store;
};

사용 중인 OS, 버전)
저는 맥 OS사용자이며, 사용하고 있는 버전은 아래와 같습니다.

{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build"
  },
  "author": "luckyhaejin",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "antd": "^4.2.1",
    "next": "^9.5.5",
    "next-redux-wrapper": "^6.0.2",
    "prop-types": "^15.8.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.9",
    "redux": "^4.2.1",
    "styled-components": "^6.1.1"
  },
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}

상황)
그래서 @reduxjs/toolkit과 관련한 문제 같아 react, react-dom 버전을 최신버전인 18로 바꾸고 next도 최신 버전인 14버전으로 바꾼 뒤 @reduxjs/toolkit을 설치하고 @reduxjs/toolkit 방식으로 대체하라는 메세지 안의 redux 링크를 참고하여 코드를 수정해보았습니다. https://redux.js.org/introduction/why-rtk-is-redux-today 하지만 제가 맞게 작성한건지 잘 모르겠고, 이렇게 제가 짠 코드로 변경을 하게되면 강의를 보며 따라하기가 어려워질 것 같아서 다시 원래 에러가 난 상태로 되돌린 상태입니다.

질문)

reduxjs/toolkit을 적용하여 작성한 아래 코드가 맞게 작성된건지 궁금합니다.

질문)

깃에서 reduxjs/toolkit을 사용한 코드를 강의 순서대로 적용하고 싶어서 찾아보았으나, 섹션2 코드가 순서대로 적용된게 아니라 한번에 올라온것 같아서, 혹시 강의 순서대로 @reduxjs/toolkit을 적용한 코드가 있다면 어떻게 해야 그 코드를 순서대로 볼 수 있는지 궁금합니다. 만약 강의 순서대로 적용한 코드가 없고 섹션별로 나눠져 있다면 섹션 순서대로 코드를 보는 방법이 궁금합니다.

수정 전)

reducers/index.js

const initialState = {
    user: {
        isLoggedIn:false,
        user:null, 
        signUpData:{},
        loginData:{}
    },
    post: {
        mainPosts:[]
    }
};

export const loginAction = (data) => {
    return {
        type: 'LOG_IN',
         data
    }
}

export const logoutAction = () => {
    return {
        type: 'LOG_OUT'
    }
}



// 이전 상태, 액션 => 다음상태
const rootReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'LOG_IN':
            return {
                ...state,
                user: {
                    ...state.user,
                    isLoggedIn: true,
                    user:action.data
                }
            };
        case 'LOG_OUT':
            return {
                ...state,
                user: {
                    ...state.user,
                    isLoggedIn: false,
                    user:null
                }
            };
       default: 
          return state;
    }
};

export default rootReducer;

수정 후)
reducers/userSlice

import {createSlice} from '@reduxjs/toolkit'

const userSlice = createSlice({
    name: 'user',
    initialState: {
        isLoggedIn: false,
        user:null
    }, 
    reducers: {
        login(state, action) {
            isLoggedIn: true,
            user:action.payload;
        },
        logout(state) {
            isLoggedIn: false,
            user:null
        }
    }
})

export const {login, logout} = userSlice.actions;
export default userSlice.reducer;

reducers/postSlice

import {createSlice} from '@reduxjs/toolkit'

const postSlice = createSlice({
    name: 'post',
    initialState: {
        mainPosts:[]
    },
    reducers: {
        
   }
});

export default postSlice.reducer;

수정 전)
store/configureStore.js

import {createWrapper} from 'next-redux-wrapper';
import {createStore} from 'redux';

import reducer from '../reducers'; 


const configureStore = () => {
    const store = createStore(reducer);
    store.dispatch({
        type:'CHANGE_NICKNAME',
        data:'luckyhaejin'
    });
    return store;
};

const wrapper = createWrapper(configureStore, {
    debug: process.env.NODE_ENV === 'development',
});


export default wrapper;

수정 후)

store/configureStore.js

import { createWrapper } from 'next-redux-wrapper';
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../reducers/userSlice';
import postReducer from '../reducers/postSlice'

const makeStore = () => {
    const store = configureStore({
        reducer: {
            user: userReducer,
            post: postReducer
        }
    });
    return store;
};

const wrapper = createWrapper(makeStore, {
    debug: process.env.NODE_ENV === 'development',
});

export default wrapper;