[redux] 리액트에 redux 적용하기

설치 방법

yarn add redux
yarn add react-redux

# index.js

import {Provider} from "react-redux";

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

 

<Provider store={store}> : Redux 스토어를 React 애플리케이션에 제공하는 역할을 하는 Provider 컴포넌트이다.

store는 Redux 스토어 객체로, 이를 통해 애플리케이션의 상태를 관리한다.

 

# actions.js

- 액션을 만든다.

export const updatePageState = (state) => {
  return {
    type: "UPDATE_PAGE_STATE",
    payload: state,
  };
};

 

- type : 액션의 유형을 나타내는 문자열
- payload: 액션에 포함된 부가적인 정보를 나타냄

 

# reducer.js

- 초기값을 설정해준다.

const initialState = {
  startPageState: {
    page: 1,
    startPage: "main",
    registrationNo: "",
    donorName: "유지니",
  },
};

 

- 현재 상태와 액션을 받아온다.

const reducer = (state = initialState, action) => { //현재의 상태, 액션을 받아온다.
  switch (action.type) {
    case "UPDATE_PAGE_STATE": // 이 타입일때 리턴이 실행된다.
      return { // 현재상태를 복사하고 payload 값으로 업데이트한 새로운 상태를 반환한다.
        ...state,
        startPageState: action.payload,
      };
    default: // 현재 상태를 그대로 반환
      return state;
  }
};

 

# store.js

- store를 만든다.

import { createStore } from "redux"; //"redux" 라이브러리에서 제공하는 createStore 함수를 가져오는 부분
import rootReducer from "./reducer";

const store = createStore(rootReducer);
// 이 부분은 createStore 함수에 rootReducer를 전달하여 Redux 스토어를 생성하는 부분
// 이제 store 변수에는 애플리케이션의 상태가 저장됨

export { store };

 

# mian.js

import React from "react";
import {Button} from "antd";
import {updatePageState} from "./redux/actions";
import { useDispatch, useSelector } from "react-redux";
import {useNavigate } from 'react-router-dom';

const ReduxPage = () => {
    const dispatch = useDispatch(); 
    const startPageState = useSelector((state) => state.startPageState);
    const navigate = useNavigate();

    const memberPage = () =>{
        dispatch(
            updatePageState({
                ...startPageState,
                startPage: "member",
                page: 1,
                registrationNo:"9901012000000",
                donorName: "헤이유"
            })
        );
        navigate('/redux-sub');
    }

    const donationPage = () =>{
        dispatch(
            updatePageState({
                ...startPageState,
                startPage: "donation",
                page: 2,
                registrationNo:"0001013000000",
                donorName: "하이유"
            })
        );
        navigate('/redux-sub');

    }


    return(
        <>
            <Button onClick={()=> {
                memberPage()
            }}>memberPage</Button>
            <Button onClick={()=> {
                donationPage()
            }}>donationPage</Button>
            <div>
               <p> 현재 상태값</p>
                <p>  현재 페이지 이름 : {startPageState.startPage}</p>
                <p>  현재 페이지 수 : {startPageState.page}</p>
                <p>  현재 기부자 이름 : {startPageState.donorName}</p>
                <p>  현재 등록번호 : {startPageState.registrationNo}</p>
            </div>


        </>

    )
}

export default ReduxPage;

 

  const startPageState = useSelector((state) => state.startPageState);

- useSelector 사용하여 startPageState 값을 가져옵니다. 처음 화면에는 초기값이 나타납니다. => 개념에서 getState와 같다.

- memberPage 버튼을 누르거나 donationPage 버튼을 누르면 상태값이 바뀐다.

- 페이지 전환이 되었다가 뒤로가기를 하면 변경된 상태값을 보인다.

 

초기값 보여주는 사진

memberPage 버튼 클릭한 후 상태값

 

 

# ReduxSubPage.js

import React from "react";
import {useSelector } from "react-redux";


const ReduxSubPage = () => {
    const startPageState = useSelector((state) => state.startPageState); // useSelector 훅은 Redux 스토어의 상태를 읽어오기 위한 훅

   return(
       <>
           <div>
               <p> 이 페이지 정보</p>
               <p>  현재 페이지 이름 : {startPageState.startPage}</p>
               <p>  현재 페이지 수 : {startPageState.page}</p>
               <p>  현재 기부자 이름 : {startPageState.donorName}</p>
               <p>  현재 등록번호 : {startPageState.registrationNo}</p>
           </div>


       </>
   )
}

 

 

# 참조

https://github.com/YooGenie/react-study/issues/37

redux 해보기 · Issue #37 · YooGenie/react-study