리덕스 실제 구현하기 강의 질문

[리뉴얼] React로 NodeBird SNS 만들기

리덕스 실제 구현하기

해결된 질문

작성

255

안녕하세요 수강생입니다. 강의 내용중 질문이 있어 여쭤봅니다.

이렇게 initailState를 넣고,

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

이렇게 case에 적으셨는데

        case 'LOG_IN':
            return {
                ...state,
                user: {
                    ...state.user,
                    isLoggedIn: true,
                    user: action.data
                },
            };

user:{

...state, <====이부분은 초기 state 전체로 이해하고있고,

user :{

...state.user, <=====이건 초기 state의 user:{ }정보

가 들어가는건데, 이미 다 들어간 상태에서 왜 또 isLoggedIn:true, user: action.data가 들어가는것인가요?

혹시 수정하는부분은 ...state.user로 일단 기존 state.user값을 넣어놓아야되고, 그밑에 변경할것들을 적어주면 알아서 중복되는것들을 변경해주는건가요??

저는 밑처럼 ..state.user, 를 빼는게 맞다고 생각하고 있었거든요.

                case 'LOG_IN':
            return {
                ...state,
                user: {
 
                    isLoggedIn: true,
                    user: action.data
                },
            };

아래 같은 에러가 나서 여쭤봅니다.
store_configureStore__WEBPACK_IMPORTED_MODULE_4___default.a.withRedux is not a fu
at Module../pages/_app.js

_app.js

import 'antd/dist/antd.css';
import { PropTypes } from 'prop-types';
import React from 'react';
import Head from 'next/head';
import wrapper from '../store/configureStore'

const PickMe = ({ Component }) => {
    return (
        <>
        <Head>
            <meta charSet="utf-8"/>
            <title>PICK-ME</title>
        </Head>
        <Component />
        </>
    )
};
 PickMe.propTypes = {
    Component: PropTypes.elementType.isRequired,
}


export default wrapper.withRedux(PickMe);

react nodejs express redux Next.js

답변 3

제로초(조현영)

지식공유자

...state.user를 빼면 signUpData와 loginData가 사라집니다.
configureStore.js 코드를 봐야 합니다.

kyj1

질문자

아 그렇군요. 감사합니다. 문의가 많아보이는데 성실히 답변주셔서 감사하고 힘내십쇼!

kyj1

질문자

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:'kim'
    })
    return store;
};

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

export default wrapper;

근데 실제화면에서는 createStore가 deprecated 되었다고 짝대기가 그어져있거든요. 근데 찾아보니 기능은 문제없다고해서 그냥 냅두고 하고있었습니다.

제로초(조현영)

지식공유자

createStore 짝대기는 무시하셔도 됩니다. 이제는 redux-toolkit이 공식화되어서 redux 단독 사용을 비추천하는 것입니다.

웹팩 에러는 .next 폴더 지우고 기존 서버 다 끈 뒤 다시 빌드해보세요.

kyj1

질문자

ㅡㅡ 일단 강의 그냥 진행하다가 미들웨어 적용하고있었고 껐다킨것도없는데, 그냥다시되네요..ㅡㅡ

const configureStore=()=>{
    const middlewares = [];
    const enhancer = process.NODE_ENV ==='production'
    ?compose(applyMiddleware(...middlewares))
    :composeWithDevTools(applyMiddleware(...middlewares))
    const store=createStore(reducer,enhancer);
    store.dispatch({
        type:'CHANGE_NICKNAME',
        data:'kim'
    })
    return store;
};

미들웨어랑 관련이 있을 수 있나요?ㅡㅡ

아니면 리덕스와 저와 합이 안맞는거같네요

제로초(조현영)

지식공유자

아뇨 그냥 웹팩 빌드가 꼬인 겁니다. 리덕스랑 아무 관련 없는 에러입니다.

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

리덕스 실제 구현하기 강의 질문