Redux state와 reducer 더 만들기

state 와 reducer을 더 만드려면

import { combineReducers, createStore } from 'redux';

let alert초기값 = true;

function reducer2(state = alert초기값, 액션){

  return state
}

let 기본state = [
  { id : 0, name : '멋진신발', quan : 2 }, 
  { id : 1, name : '멋진신발2', quan : 1}
]; 

function reducer(state = 기본state, 액션) {
  if ( 액션.type === '수량증가' ) {//수량증가라는 데이터수정방법을 정의한 것
    let copy = [...state];
    copy[0].quan++;
    return copy
  } else if ( 액션.type === '수량감소' ) {
    let copy = [...state];
    if (copy[0].quan > 0) {
      copy[0].quan--;
    } else {
      copy[0].quan = 0;
    }
    return copy
  } else {
    return state
  }
}

let store = createStore(combineReducers({reducer,reducer2}));

이런 식으로, 위에 새로운 변수(초기값)로 상태를 담고, reducer2라고 새로운 reducer을 만들어서 createStore에 combineReducers라는 문법으로 오브젝트 형태로 두개의 reducer을 담을 수 있다. import도 해와야 한다.

 

그리고, 사용할 때 reducer가 2개 이상이 되면

function state를props화(state) {
    return {
        state : state.reducer,
        alert : state.reducer2
    }
}
export default connect(state를props화)(Cart)

이런 식으로, state를 저장할 때 뒤에 어느 리듀서인지 달아줘야 한다.  그리고 역시 사용할 땐 props를 사용해야 한다.

{
                props.alert == true
                ? <div className="my-alert2">
                    <p>지금 구매하시면 신규할인 20%</p>
                    <button>닫기</button>
                  </div>
                : null
}

 

만약, 닫기 버튼을 누르면 alert초기값을 false로 만들어서 alert창을 꺼지게 하려면

function reducer2(state = alert초기값, 액션){
  if ( 액션.type == 'alert닫기' ) {
    state = false;
    return state
  } else {
    return state
  }
}

이렇게 reducer2에 데이터수정하는 if문을 쓰고

<button onClick={()=>{ props.dispatch({type : 'alert닫기'}) }}>닫기</button>

 

dispatch를 써준다.

 

redux를 쓸 때 주의사항은 위에서 처럼 컴포넌트 하나에서만 쓰는건 굳이 저장할 필요가 없다는 것이다. alert닫기같은 Cart.js 하나의 파일에서만 쓰는건 굳이 저장할 필요가 없다.

즉, 하찮은 것들은 useState를 쓰는게 낫다.