Coding Apple, React 강좌 내용 정리.17 - 2.Redux

redux관련 저번 내용

Coding Apple, React 강좌 내용 정리.17 - Redux.1

 

2. Redux

다시.. Redux를 쓰는 이유?

1. 복잡한 props 사용을 줄일 수 있다.

모든 컴포넌트가 직접 데이터를 쓸 수 있다.

2. 데이터 수정이 용이하다 : state 데이터 관리가능. [여러 콤포넌트에서 사용하는 데이터를 한 번에 처리/관리]

 

   reducer   

1. reducer만들기 : state의 수정방법을 미리 정의한다고 이해하자.

• 수정된 state를 리턴하는 함수라 이해.
• 단 무조건 state를 리턴해야 한다.

2. store만들때, reducer를 만들어서 넣으면 된다.

3. 데이터를 수정(요청)을 할 때는 dispatch() 를 쓴다.

 

조그만 사이트라면 오히려 React쓰는게 안 좋을수도 있지만

대규모 사이트에서 많은 data변화, state가 있다면

관리가 편해질수있다. (상태관리 용이)

 

[ index.js ]

// 기존의 내용을 아래처럼 바꿀것
// let store = createStore( ()=> {
//   return [ {id:0, name:'신발',quan:2} , {id:1, name:'파란신발', quan:3} , {id:2, name:'빨간신발', quan:1}
//   ]
// } );

// reducer에 넣을 초기 데이터
let 초기값= [
  {id:0, name:'신발',quan:2} , {id:1, name:'파란신발', quan:3} , {id:2, name:'빨간신발', quan:1}
];

// reducer를 만들자
function reducer(state=초기값, 액션) {
  if (액션.type ==='수량증가') {
    let copy = [...state];

    copy[액션.id].quan++;
    return copy;
  }
  else if (액션.type === '수량감소') {
    let copy = [...state];
    
    // - 수량이 되는걸 방지위해서
    // 0보다 클 때만 감소시키는 부분을 넣는다.
    if (copy[액션.id].quan > 0) {
      copy[액션.id].quan--;
    }
    return copy;
  }
  else {
    return state;
  }
}

// 그리고, store에 reducer를 추가한다.
let store = createStore(reducer);

[ Cart.js ]

수정을 위해서 dispatch 함수를 이용해서, 변경할 값들을 넣어준다.

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

 

만약 reducer가 2개 이상이라면?

reducer2라는 걸 만든다면, createStore에 넣어야 하는데 이때

combineReducers 함수를 사용한다.

// 값
let alert초기값 = true;

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

// 여러 개의 reducer를 담자
let store = createStore( combineReducers( {reducer, reducer2} )

단, store의 state도 사용법, 데이터형도 변하게된다.

 

[Cart.js]

function fnc(state) {
    return {
        state: state
    }
}

 

아래처럼 사용한다.

function fnc(state) {
    return {
        state: state.reducer ,
        alertState: state.reducer2
    }
}

 

닫기 버튼 만들기 예제

{
    props.alertState === true
    ?
    <div className="my-alert2">
    <p>지금 구매하시면 신규할인 20%</p>
    <button onClick={()=> {
        props.dispatch({type:'닫기'})
    }}>Close</button>
    </div>
    : null
}

[단, 이건 다양한 reducer를 확인하기위한 예시이며, Redux를 사용해서 담을 데이터는 여러 군데에서 공통으로

사용할 데이터일때 쓰는 것이 좋다고...]