Redux 기본 개념 1

Redux

• 애플리케이션의 상태를 중앙에서 관리하는 라이브러리
• 스토어(Store) : 애플리케이션의 상태가 저장되는 장소
• 액션(Action): 상태를 변경하기 위한 명령어
• 리듀서(Reducer): 액션에 따라 상태를 변경하는 함수

Redux Toolkit 사용법

설치

npm install @reduxjs/toolkit react-redux

스토어 생성
: store.ts 파일 생성

import { configureStore } from '@reduxjs/toolkit';
import appReducer from './slices/appSlice';

export const store = configureStore({
  reducer: {
    app: appReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

슬라이스 생성
: appSlice.ts 파일 생성

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface AppState {
  currentSection: string;
}

const initialState: AppState = {
  currentSection: 'home',
};

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    setCurrentSection: (state, action: PayloadAction<string>) => {
      state.currentSection = action.payload;
    },
  },
});

export const { setCurrentSection } = appSlice.actions;
export default appSlice.reducer;

스토어를 React 앱에 연결
: index.tsx 파일 수정

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

컴포넌트에서 Redux 상태 사용
: useSelector, useDispatch Hook을 사용해서 Redux 상태 사용하기

사용예시(Header.tsx)

import React from 'react';
import styled from 'styled-components';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../redux/store';
import { setCurrentSection } from '../redux/slices/appSlice';

const HeaderContainer = styled.header`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1000;
`;

const Nav = styled.nav`
  display: flex;
  justify-content: center;
`;

const NavLink = styled.a`
  margin: 0 1rem;
  text-decoration: none;
  color: #333;
`;

const Header: React.FC = () => {
  const currentSection = useSelector((state: RootState) => state.app.currentSection);
  const dispatch = useDispatch();

  const handleNavClick = (section: string) => {
    dispatch(setCurrentSection(section));
  };

  return (
    <HeaderContainer>
      <Nav>
        <NavLink href="#home" onClick={() => handleNavClick('home')}>Home</NavLink>
        <NavLink href="#about" onClick={() => handleNavClick('about')}>About</NavLink>
        <NavLink href="#projects" onClick={() => handleNavClick('projects')}>Projects</NavLink>
        <NavLink href="#contact" onClick={() => handleNavClick('contact')}>Contact</NavLink>
      </Nav>
      <div>Current Section: {currentSection}</div>
    </HeaderContainer>
  );
};

export default Header;