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

//reducers/index.js

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

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

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

// ( 이전상태, 액션 ) => 다음상태
const rootReducer = (state = initialState, action) => {
    console.log(action.type)
    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

//스토어

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

import reducer from '../reducers/index'

const configureStore = () => {
    const store = createStore(reducer);
    return store;
}

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

export default wrapper

action에 type으로는 콘솔이 찍히는데 isLoggedin이 안바뀌네요... 어디가 잘못됬을까요 state값이 변경이 안됩니다. ture에서 false로 바뀌어야 하는데 설명 부탁드립니다.

import React, { useState } from 'react'
import Link from 'next/link'
import LoginForm from './LoginForm'
import UserProfile from './UserProfile'
import { Menu, Input, Row, Col } from 'antd'
import styled from 'styled-components'
import { useSelector } from 'react-redux'

const SearchInput = styled(Input.Search)`
    vertical-align: middle;
`;

const AppLayout = ({ children }) => {
    const { isLoggenIn } = useSelector((state) => state.user)

    console.log(isLoggenIn)

    return (
        <div>
            <Menu mode='horizontal'>
                <Menu.Item>
                    <Link href="/">노드버드</Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/profile">프로필</Link>
                </Menu.Item>
                <Menu.Item>
                    <SearchInput enterButton />
                </Menu.Item>
                <Menu.Item>
                    <Link href="/signup">회원가입</Link>
                </Menu.Item>
            </Menu>
            <Row gutter={8}>
                <Col xs={24} md={6}>
                    {isLoggenIn ? <UserProfile /> : <LoginForm />}
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    <a href="http://www.naver.com" target={'_blank'} rel="noreferre noopener">향훈</a>
                </Col>
            </Row>

        </div>

    )
}



export default AppLayout

import React, { useCallback, useState } from 'react';
import { Form, Input, Button } from 'antd';
import Link from 'next/dist/client/link';
import styled from 'styled-components'
import { useDispatch } from 'react-redux';
import { loginAction } from '../reducers';

const LoginForm = () => {
    const dispatch = useDispatch()

    const [id, setId] = useState("")
    const [password, setPassword] = useState("")

    const onChangeId = useCallback((e) => {
        setId(e.target.value);
    }, []);

    const onChangePw = useCallback((e) => {
        setPassword(e.target.value);
    }, []);

    const onSubmitForm = useCallback(() => {
        console.log(`id: ${id}, pw: ${password}`);
        dispatch(loginAction({ id, password }))
    }, [])

    return (
        <Form onFinish={onSubmitForm}>
            <div>
                <label htmlFor="user-id">아이디</label>
                <br />
                <Input type="text" name='user-id' value={id} onChange={onChangeId} />
            </div>
            <div>
                <label htmlFor="user-id">비밀번호</label>
                <br />
                <Input type="password" name='user-id' value={password} onChange={onChangePw} required />
            </div>
            <ButtonWrapper>
                <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
                <Link href="/signup"><Button>회원가입</Button></Link>
            </ButtonWrapper>
        </Form>
    )
}

const ButtonWrapper = styled.div`
    margin-top: 10px;
`

export default LoginForm