Redux로 state를 저장하고 사용하는 방법을 배웠고
이제 데이터 수정 방법을 배워야 한다

redux사용 state 데이터 수정 방법
1. reducer 함수를 만들고 그곳에 데이터 수정하는 방법을 정의해놓고
2. 원하는 곳에서 dispatch() 라는 함수를 써서 reducer에게 수정해달라고 요청한다

reducer, dispatch로 데이터 수정하기

장바구니 품목에 버튼 으로 수량 조절
Cmarket에서 장바구니 수량 조절 하는 것과 같이
데이터 수정이 필요할 때가 있다

간단하게 어떤 방식인지 만들어 보자

index.js

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

let store = createStore(()=>{ return [{id : 0, name : '노른자 분리기', quan : 2 }]  })

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>

);

Cart.js

function Cart(props){
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        { props.state.map((a,i)=>{
          return (
          <tr key={i}>
            <td>{a.id}</td>
            <td>{a.name}</td>
            <td>{a.quan}</td>
            <td><button onClick={()=>{ ??? }}> + </button></td>
            <td><button onClick={()=>{ ??? }}> - </button></td>
          </tr>
          )
        })  }
      </Table>
    </div>
  )
}

• 버튼을 누르면 redux에 있는 state를 수정해야 하는데
  redux에 있는 state를 수정하고 싶으면 특별한 방법이 필요하다

1. state 데이터의 수정방법을 index.js에다가 정의해놓고 (reducer)
2. index.js에게 수정 해달라고 요청해야 한다

수정하는 방법은 reducer로 만들어둔다

1. 데이터수정하는 reducer 만드는 법

reducer는 function 함수로 만들면 된다

reducer는 function안에
1. state 초기값과
2. state 데이터 수정방법이 들어있는 함수

장바구니 데이터를 변경할 수 있는 reducer 를 만들어 보자!

index.js

function reducer(){
  return [{id : 0, name : '노른자 분리기', quan : 2}]
}
let store = createStore(reducer);

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

기본세팅

reducer는 함수로 만들어 준다 (state를 뱉어내는 함수라고 생각)
reducer 만든걸 createStore()안에 넣으면 reducer가 완성된다

reducer를 만들 때 아래처럼
따로 state 변수를 만들고, 그걸 reducer에 default 파라미터 문법으로 집어넣는 것 처럼 작성 할 수도 있다

index.js

let initialState = [{id : 0, name : '노른자 분리기', quan : 2}];

function reducer(state = initialState, action){
  return state
}
let store = createStore(reducer);

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

2. reducer안에 데이터 수정방법 적기

reducer는 데이터 수정방법을 정의하는 곳이므로
state 데이터 수정방법을 적어주면 된다
버튼을 실제로 동작하게 만들어 보자

index.js

let initialState = [{id : 0, name : '노른자 분리기', quan : 2}];

function reducer(state = initialState, action){
  if (action.type === '수량증가') {
    let copy = [...state];
    copy[0].quan++;
    return copy

  } else if (action.type === '수량감소'){
    let copy = [...state];
    copy[0].quan--;
    return copy

  } else {
    return state
  }
  
}
let store = createStore(reducer);

데이터가 수정되는 방법
1. '수량증가', '수량감소'라는 데이터 수정방법 이름을 만들어주고(액션.type === 수정방법이름) 으로 써주면 된다
2. if문 안에는 '수량증가'라는 요청이 들어올 경우 수정된 state 리턴
3. else문 안에는 수량증가 요청이 안들어온 경우 기본 state를 리턴

• array, object로 구성된 state 데이터를 수정할때는 사본을 만들어서 수정해주는게 좋다

3. dispatch() 함수로 명령하기

데이터 수정방법을 정의했고 이제 HTML에서 버튼을 눌렀을 때
'수량증가' 라고 작명해놓은 데이터 수정방법을 실행해 달라고 dispatch() 함수를 이용해서 명령을 줘야 한다

dispatch()를 쓰면 HTML 안에서 reducer함수를 동작시킬 수 있다

Cart.js의 버튼

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

버튼 누를 때마다 state 수정방법이 실행되며 수량이 수정된다
(type : 데이터수정방법 )

데이터 수정하고 싶을 때
1. reducer 만들어놓고
2. dispatch로 reducer를 불러서 수정요청 하면 된다

4. 리덕스를 사용하는 이유

코드가 길어지고 설정해줘야 할 게 이렇게 많은데 리덕스를 왜쓰지?
라고 생각 할 수 있다
사실 이렇게 작은 사이트에서는 필요없지만
큰 사이트라서 컴포넌트가 만약 100개 있어서
컴포넌트 100곳에서 위의 장바구니 state를 수정하는 코드를 짜게
되었을 때 중간에 state값에 오류가 난다면 100개의 컴포넌트를 하나하나 가서 다 봐야한다

하지만 redux를 만들어서 state 수정하는 방법을 미리 정의 해놓으면 redux안의 reducer만 가서 보면 된다
state 데이터가 어떻게 바뀌는지는 reducer에 전부다 정의되어있기 때문에!!

대규모 사이트들에서 데이터를 한 눈에, 한 곳에 관리할 수 있어서 사용한다 !

노드에서 배웠던 서버 데이터입출력 API 만드는 과정이랑 비슷한데

서버에서 미리 API를 작성해 두는 것처럼 리덕스도 비슷한 방식이라고 이해 할 수 있다
/delete => 데이터 수정하는방법