실무 React 5. state와 reducer가 더 필요하면

Cart.js 페이지에 alert UI를 하나 추가하고싶음
참고* (이 여닫기 UI는 해당 페이지 내에서만 사용하므로 redux로 관리할것이 아니라 해당 파일내에서 useState를 사용하는것이 훨씬 효율적이고 깔끔함.학습중이니 그냥 써보는것)

UI 버튼 저장할 state하나 더 필요해짐.
redux에서 state를 하나 더 만들고 싶으면 어떻게 할지 기록하겠습니다.

일단 요약 2줄!
1. reducer가 여러개 필요하면 그냥 다른 이름의 reducer2와 reducer2의 초기값 하나 더 생성
2. 이걸 combineReducer()라는 함수안에 삽입 후 createStore()안에 삽입.

(Cart.js)

function Cart(props){
  return (
    <div>
      <Table>table부분</Table>
      <div className="my-alert2">
        <p>지금 구매하시면 20% 할인</p>
        <button>닫기</button>
      </div>
    </div>
  )
}

UI 여닫기는 당근 true/false.

근데 어디에다 이 정보를 저장하지?
이미 state와 reducer 한쌍이 있는데 이 데이터 내부에 추가저장하나?

아래처럼 가능은 하지만 다른종류의 state는 또다른 reducer를 만들자

let state초기값 = [ {id : 0, name : '새로운상품', quan : 2}, true ];

허나 상품만 꺼내고 싶을땐 함께 저장해둔 true를 걸러야 하기에 귀찮아짐.

해결책)
그냥 일반 컴포넌트에선 useState()를 하나 더쓰면 됨.
redux store에선 state + reducer를 하나 더 만들어서 true/false 저장하면 됨

reducer 하나 더 만들기

(index.js)

import {creatStore, combineReducer} from 'redux';

let 초기값 = [
  { id : 0, name : "멋진신발", quan : 2},
  { id : 1, name : "섹시신발", quan : 34}
];

function reducer(state = 초기값, 액션){
  if ( 액션.type === '수량증가' ){
    let copy = [...state]
    copy[액션.idx].quan++;
    return copy;
  } else if ( 액션.type === '수량감소' ){ 
      let copy = [...state]
      copy[액션.idx].quan > 0 ? copy[액션.idx].quan-- : copy[액션.idx].quan = 0
      return copy;
  } else {
    return state;
  }
}

////// 아래처럼 추가 저장해준다.

let alert초기값 = true;

function reducer2(state = alert초기값, 액션){
  if(액션.type === "buttonClose"){
   	return false; // reducer는 항상 state를 뱉어냄
  } else {
  	return state // 수정요청이 없으면 현재state값을 뱉어라라는 소리. 
  }
}

let store = createStore(combineReducers({reducer, reducer2}))
// 윗줄처럼 reducer를 하나 더 만들었으면 store에 등록까지 해야 사용가능하다
combineRuducers 안에 object형식으로 담는다.

(Cart.js)

function Cart(props){
  return (
    <div>
      <Table>table부분</Table>
      { props.alert열렸니 === true
       ? (<div className="my-alert2">
            <p>지금 구매하시면 20% 할인</p>
            <button onClick={()=>{props.dispatch({type:"buttonClose"})}}>닫기</button>
          </div> )
       : null 
       }
    </div>
  )
}

// store 데이터들을(state) props화 해주는 함수(사용할 곳에서 props써줘야함)
function state를props화(state){
  console.log(state);
  return {
    state : state.reducer,
    alert열렸니 : state.reducer2 //리듀서2에 있는거 가져오는법
  }
}
export default connect(state를props화)(Cart);

redux에서 state값을 바꾸기위해선,
reducer안에 값을 바꾸기 위해 일단 정의해놓는다.

📌정리!

간단한 UI를 만드는데 redux에 굳이 state를 만들 필요가없다.
한 state가지고 다른 컴포넌트에서도 공유한다면 위의 방법을 사용하지만
위와 같이 간단한건 useState로 Cart.js 안에 만들자.