2023.12.29+ 리덕스 리액트리덕스

리액트 hook - 호출하는 컴포넌트에서 독립적으로 생성하고 실행 useState useReducer

리덕스 <--------> react-redux <-------> 리액트

백엔드(WAS) - 공유객체 : page, request, session, application 공유객체.setAttribute() page: 브라우저에 출력되는 페이지가 종료되기 전까지 공유 범위 request : url을 통한 request 요청이 종료되기 전까지 공유 범위 session : Session 객체가 종료되기 전까지 공유 범위 application : 전체 프로젝트가 종료되기 전까지 공유 범위 예) page.setAttribute('name','홍길동') application.setAttribute('name','홍길동')

Shoppy 프로젝트 - test.jsp, test2.jsp test1.jsp ==> String name = page.getAttribute('name') test2.jsp ==> String name = page.getAttribute('name')

test1.jsp ==> String name = application.getAttribute('name') test2.jsp ==> String name = application.getAttribute('name')

리덕스 키워드
1.액션 객체
상태에 변화가 필요할 때 발생시킴 (객체하나로 표현)
type을 필수로 그외의 값들은 개발자 마음대로 생성
2.리듀서
변화를 일으키는 함수 현재의 상태와 액션을 참조하여 새로운 상태를 반환

3.스토어
application 전체 공유를 하기 때문에 메모리 효율을 고려해야한다 한 애플리케이션당 하나의 스토어 현재의 앱 상태와 리듀서, 내장함수 포함
4.디스패치
스토어의 내장함수 액션을 발생시키는 것

5.구독
subscribe 함수에 특정 함수를 전달해주면 액션이 디스패치 되었을 때 마다 전ㄷ라해준 함수가 호출 (리액트에서는 connect 함수 또는 useSelector Hook 을 사용)

[리덕스 모듈 생성]
스토어생성

액션 리덕스 모듈 (reducer 객체)생성

여러개의 액션 리덕스 모듈 합치기

리액트 프로젝트에 리덕스 적용

리덕스와 리액트 연동을 위한 컨테이너 생성 : useSelector , dispatch
컨테이너에서 컴포넌트 호출

 

 

import React from "react";
import { combineReducers } from "redux";
import reduxCount from "./reduxCount";

const rootReducer = combineReducers({
  reduxCount,
  //추가할 여러개 reducer 추가...
});

export default rootReducer;

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import reduxCount from "./../modules_redux/reduxCount";
import CountItem_redux from "../components/CountItem_redux";
/* 컴포넌트 이벤트 호출과 스토어 중개 역할*/
const CountContainer = () => {
  //total, count 값 가져오기
  const { count, total } = useSelector((state) => ({
    count: state.reduxCount.count,
    total: state.reduxCount.total,
  }));

  //2. dispatch를 이용하여 이벤트 액션 이벤트 함수 처리
  const dispatch = useDispatch();
  const onPlus = () => dispatch({ type: "plus" }); //리듀서의 액션객체 호출
  const onMinus = () => dispatch({ type: "minus" });
  const onReset = () => dispatch({ type: "reset" });

  return (
    <>
      {/* total, count값을 공유하는 컴포넌트 호출*/}
      <CountItem_redux
        count={count}
        total={total}
        onPlus={onPlus}
        onMinus={onMinus}
        onReset={onReset}
      />
    </>
  );
};

export default CountContainer;

import React, { useReducer, useState } from "react";
import countReducer from "../reducer/countReducer";
const CountItem_redux = ({ count, total, onPlus, onMinus, onReset }) => {
 
  return (
    <div>
      <h1>Count : {count}</h1>
      <button
        type="button"
        onClick={onPlus}>
        +
      </button>
      <button type="button" onClick={() => onReset()}>
        reset
      </button>
      <button
        type="button"
        onClick={() => onMinus()}>
        -
      </button>
      <input type="number"   /* onChange={(e) => handleChange(e)} */ />
      <h2>total : {total}</h2>
    </div>
  );
};

export default CountItem_redux;