[React] Redux셋팅 후 Reducer 셋팅하기

(index.js)

import { Provider } from 'react-redux'
import { createStore } from 'redux'


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)

// reducer는 별거 아니고 그냥 수정된 state를 뱉는 함수

 

<button onClick={() => { props.dispatch({ type : '수량증가' })}}>+</button>

 

버튼을 만들고 그걸 누르면 1을 더함

1. 데이터 수정방법을 미리 정의한 후

2. dispatch() 합니다.

 

quan이라는 데이터는 데이터를 이렇게만 수정가능합니다.

 

quan데이터가 잘못되면 reducer만 찾으면 됩니다.

state 데이터 관리가 용이합니다. (일명 상태관리)

 

본 게시물은 코딩애플 강의를 보고 만들었습니다.