Redux 사용의 기본

Redux 사용 이유는?

1. props 전송 없이 모든 컴포넌트가 데이터를 바로 꺼내쓸 수 있도록 하려고

2. reducer, dispatch 함수로 state 데이터 관리를 용이하게 하려고

 

Reducer

• a function describing how the application's state changes
  (previousState, action) => nextState

reducer함수로 state데이터의 수정 방법을 미리 정의한다.

state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션)

 

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

function reducer(state = 초기값, 액션){
  if(액션.type === '수량증가'){
    let copy = [...state];
    copy[0].quan++;
    return copy
  } else if(액션.type === '수량감소'){
    let copy = [...state];
    copy[0].quan--;
    return copy
  } else{
    return state
  }
}

 

reducer2, reducer3을 추가해서 여러개의 reducer를 구현해도 됨.

combineReducers()라는 함수안에 집어넣은 후에 createStore()안에 넣으면 된다.

 

 

 

Store

• 앱의 전체 상태 트리를 가지고 있는 스토어. 이 안의 상태를 바꾸는 유일한 방법은 액션을 보내는 것
• 클래스 X, just 몇가지 메서드가 들어있는 객체

Store메서드

• getState()
• dispatch(action)
• subscribe(listener)

 

 

 

Dispatch

• dispatch()를 사용하면 HTML 안에서 reducer함수를 동작시킬 수 있다.
• 액션을 보내서 상태 변경을 일으킨다.

<tbody>
 {
  props.state.map((a,i)=>{
   return (
    <tr key={i}>
     <td>{ a.id }</td>
     <td>{ a.name }</td>
     <td>{ a.quan }</td>
     <td>
      <button onClick={()=>{ props.dispatch({ type: '수량증가'}) }}>+</button>
      <button onClick={()=>{ props.dispatch({ type: '수량감소'}) }}>-</button>
     </td>
    </tr>
   )
  })
 }
</tbody>

 

 

 

https://iancoding.tistory.com/138