리액트 리덕스 관련 질문드립니다.

Question

안녕하세요. 평소 BE만 해오다가 사이드 프로젝트는 풀스택으로 하고자 리액트를 학습하면서 만들고 있는데 어려움이 생겨 질문 드립니다. 문제점리덕스 툴킷으로 관리하는 전역변수가 무슨 이유인지 모르겠으나 초기화 됩니다.로그인에 성공하면 전역으로 관리되는 storeId의 값이 업데이트 되고 페이지를 잘 보여줍니다.하지만 '/' 루트로 다시 접근하면 제가 원하는 것은 그대로 storeId는 초기화가 되지 않고 로그인 된 정보로 유지되면서를 보여주어야 하는데 storeId의 값도 null로 초기화가 되고 화면을 띄웁니다.로그인 되는 그 순간만 storeId가 바뀌고 그 뒤로 값을 확인하면 모두 null로 확인됩니다.소스코드는 아래와 같습니다.소스코드App.jsimport './App.css'; import AppRouter from './components/AppRouter'; function App() { return ( ); } export default App; AppRouter.js로그인이 되어 있다면 storeId 의 값은 null 이 아닌 다른 숫자가 들어있으므로 다른 페이지에 접근이 가능합니다.import { Routes, Route } from 'react-router-dom' import Categories from "../pages/Categories"; import DashBoard from "../pages/DashBoard"; import Login from '../pages/Login' import CreateProduct from "../pages/CreateProduct"; import ProductList from "../pages/ProductList"; import { useSelector } from "react-redux"; const AppRouter = () => { return ( } /> } /> ); } const ProtectedRoutes = () => { const storeId = useSelector((state) => state.storeId) if (!storeId) { return ; } return ( } /> } /> } /> } /> ); }; export default AppRouter;Login.js로그인에 성공하면 {storeId : 1} 와 같은 결과를 받고 storeId 전역변수에 저장합니다.storeId가 업데이트 되고 바로 로 화면 전환은 잘 됩니다. 하지만 그 뒤로 storeId의 값을 보면 업데이트 전 상태로 돌아갑니다.import axios from 'axios'; import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import { useDispatch } from 'react-redux'; import { setStoreId } from '../store'; const Login = () => { return (

); } export default Login; const LoginForm = () => { const [email, setEamail] = useState(''); const [password, setPassword] = useState(''); const dispatch = useDispatch(); function login() { axios.post('/api/v1/store/login', { email: email, password, password, headers: { 'Content-type': 'application/json', } }) .then(response => { //로그인 상태변수 변경 dispatch(setStoreId(response.data.result.storeId)); }); } return ( ); }store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit' //로그인 여부 확인 용도 let storeId = createSlice({ name: 'storeId', initialState: null, reducers : { setStoreId(state, payload) { return payload; } } }); export let { setStoreId } = storeId.actions export default configureStore({ reducer: { storeId : storeId.reducer } })

ISA · Answer

이건 리덕스 문제가 아니라 csr에 대한 이해도 문제입니다. Spa에서 페이지 이동시 실제로 브라우저단의 링크로 이동하는게 아니라 히스토리 객체를 변경하는 방식이에요. 직접 주소창을 건드리거나 새로고침시 스토어는 결국 자바스크립트 메모리이기에 휘발됩니다.

리액트 리덕스 관련 질문드립니다.

1개의 답변

#redux 목록