React Redux 3(state,ruducer 여러개만들기)

 

Redux를 쓰면서 중요한건 state나 reducer가 여러개 있을 수 있다는거

 

당연히 프로젝트가 커지면 커질수록 여러개를 만들 수 있겠지 그래서 아마 이사용방식이 점점 최종형태가

 

될듯싶다.

 

combineReducers()라는 함수에 만든 createStore()를 넣고, reducer도 여러고 결합해서 사용해주는 형태를 알아보자

 

위와같은 팝업을 닫는거는 그냥 useState를 써도되지만

 

Redux를 사용해서 해보자

 

index.js

let 초기값= [{id : 0, name : '멋진신발', quan : 2},
{id : 1, name : '멋진신발2', quan : 3},
{id : 2, name : '멋진신발3', quan : 5},
]
function reducer(state = 초기값, 액션){
.........



let alert초기값 = true
// 아래 alert초기값에 true바로 넣어서 만들어도 되긴함 state = true
function reducer2(state = alert초기값, 액션){
  if(액션.type==='닫기'){
    state = false
    return state
    // return false
  }else{
    return state
  }
  

}

 

이런식으로 기존의 reducer아래에 새로운 리듀서를 만든다.

 

열고 닫고는 on/off 방식이라 true값을 먼저 state에 저장해준다.

 

그리고 마찬가지로 reducer2에 매개변수로 저장을해준다.

 

let store = createStore(combineReducers({reducer,reducer2}))
// let store = createStore(reducer)
// 참고로 이것도 코드길면 export default로 빼서 만들어도댐 redux로 ㅇㅇ

기존에 createStore를 이와같이 바꿔준다.

 

combineReducers에 결합해서 사용해주면된다. 형식은 object형식으로!

 

<cart.js>
store에있던 데이터를 가져와서 props로 변환해주는 함수
즉 return에 있는애들이 props 라고 볼 수 있음

function state를props화(state){
  console.log(state)
  return {
    상품명 : state.reducer[0].name,
    state:state.reducer,
    alert열렸니:state.reducer2
  }
}

export default connect(state를props화)(Cart)

이곳에서 state.reducer2를 가져와 사용하면된다.

 

왼쪽은 작명이기때문에 아무이름이나 써도 상관없고 중요한건 props화해서 가져온 state에서

 

state.reducer2로 가져온다는거다. 즉 하나일때와는 다르게 가져온다는것

 

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

그리고 상단에서 3항연산자로 상태가 바뀌면 닫히게 바꿔주기만 하면 완성이다.

 

props.dispatch 사용법을 기억하자 하지만 이런 간단한건 해당 컴포넌트에서 useState를 사용하도록하자.