React Redux 2(reducer,dispatch,state수정)

reducer / dispatch 리덕스 데이터 수정하는법

 

리덕스에서 state데이터를 수정하는법 reducer 함수를 만들어 수정하는 '방법'을 정의해놓는다

 

그리고 dispatch()함수를 사용해 reducer에 수정을 요청한다.

 

정해져있는 방식이니 그대로 사용하자

 

 

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>
          </tr>
          )
        })  }
      </Table>
    </div>
  )
}

props.state로 리덕스에있는 state를 가져와 map반복문을 사용

 

a는 당연히 안의 값이고 i는 인덱스 값이다. 오류가 나지않게 key 값을 넣어주고

 

state안의 id,name,quan을 출력하게 만들었다. ???로 표시된것에 dispatch를 사용해 줘야한다.

 

index.js에 state의 수정방법을 reducer로 정의 하고 수정해야한다.

---

reducer만드는법 (데이터수정)

 

reducer에는

 

1.state의 초기값

2.state 데이터 수정방법

 

두가지를 넣어서 만든다.

 

index.js

function reducer(){
  return [{id : 0, name : '멋진신발', quan : 2}]
}
let store = createStore(reducer);

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

function reducer(state = 기본state, 액션){
  return state
}
let store = createStore(reducer);

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

이렇게 두 가지 방법으로 만든다.

 

첫번째는 return값에 state를

 

두번재는 state를따로만들어 reducer에 매개변수로 state를 넣고, 또하나의 매개변수를 넣어주는방식

 

default값을 설정해주는 방식이다.

 

function test(a = 10, b = 20){
   console.log(a + b)
}
test(1);

이러한 default 함수 사용법 예시를주는데 파이썬이랑 똑같다. 기본 매개변수값이안들오면 10,20을 주듯이

 

위에도 마찬가지다.

 

중요한거는 

 

index.js

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

function reducer(state = 기본state, 액션){
  if (액션.type === '수량증가') {
    return 수량증가된새로운state
  } else {
    return state
  }
  
}
let store = createStore(reducer);

이 방식을 사용해야 수정방식을 지정하기 좋다.

 

두번째 파라미터.type에다가 수정방식을 정의해놓는다. (액션.type === '수정방식')

 

그리고 항상 return값은 존재해야한다 기본값 그대로 리턴을 위해서도!

 

그리고 Cart.js넘어가서

Cart.js

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

dispatch를이용해 저 수정방식을 가져와 사용해주면된다.

 

index.js

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

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

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

이런식으로 state데이터를 바꾸는건 deepcopy를 이용하면되고 copy본을 return하는 형식으로 뱉어내주면 된다.

 

요약하면 Redux 데이터 수정은 reducer를만들고 dispatch로 reducer 요청해 수정하면 끝!