[React] state와 reducer를 추가하고 싶다면??

(index.js)

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

function reducer(state = 초기값, 액션) {  // 여기서 등호가 들어가는 문법은 default parameter 문법(ES6 문법)
  if (액션.type === '수량증가') {
    
    let copy = [...state]
    copy[0].quan++

    return copy
  } else {
    return state
  }
}

let store = createStore(reducer)

위 코드는 기존의 state와 reducer인데 여기에 다른 상태를 더 저장하고자 한다면

 

 

(index.js)


let alert초기값 = true

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

이렇게 state 와 reducer를 추가해주고

 

(index.js)

import { createStore, combineReducers } from 'redux' 
// 위에는 이렇게 combineReducers가 추가될 것이다.


let store = createStore(combineReducers({reducer,reducer2}))
// 그리고 store를 위와 같이 수정하면 된다.

이렇게 reducer를 추가해줄 수 있습니다.

 

여기까지만 하면 에러가 나는데 redux를 가져오는 곳에 reducer가 두개가 생기기 때문에 

다음과 같이 구분이 필요합니다.

(Cart.js)


function state를props화(state){
  return {
    state : state
  }
}

// 위를 아래와 같이 바꿔야한다.

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

또한 위 Cart.js에서 쓰고자 할때 props. 을 앞에 반드시 붙여야합니다.