[React/Redux] redux의 action함수 사용하기

 

프로젝트에서 필요했던 react 관련 내용을 정리합니다

 

 

Redux의 액션함수 사용하기

---

 

1. createAction

---

• 파라미터로 전달받은 값을 객체에 넣어주는 작업에 대하여 자동화 시킴
• 예시코드

//기존
export const increment = (index) => ({
	type: types.INCREMENT,
	index
});

//함수사용
export const increment = createAction(types.INCREMENT);

• 단, createAction함수를 사용하면 기존의 파라미터(index)값이 무엇인지 모른다
  • 따라서 파라미터로 전달받은 값을 액션의 payload값으로 설정해준다
  • 만약 increment(5) 이었다면 다음의 객체가 생성되는 것이다

  {
  	type: 'INCREMENT',
  	payload: 5 
  }
  

 

• 추가 예시코드

export const setProfile = createAction(types.SET_POFILE) // 객체 전달 자동 함수 생성

setProfile({age:15, name: 'kyu'}) // 만약 이런 파라미터가 주어졌다면 객체가 다음처럼 생성됨
/*
{
	type: 'SET_PROFILE'
	payload: {
		age: 15,
		name: 'kyu'
}
*/

 

 

2. handleAction

---

• 리듀서의 액션 type에 따라 switch작업을 하는 것을 대신한다
  • switch문 사용시엔 scope가 리듀서 함수로 설정되는 것이 결점이기 때문이다
    • 서로 다른 case에서 let, const를 통한 변수 선언시 같은 이름의 중첩으로 에러 발생
    • 그렇단들 case마다 함수를 정의하는 건 비효율적
• 첫번째 파라미터: 액션에 따라 실행 할 함수들이 가진 객체
• 두번째 파라미터: 설정하고자하는 상태의 기본값
• 예시코드

const reducer = handleActions({
	INCREMENT: (state, action) => ({ //increment 액션에 따라 실행할 객체, counter
		counter: state.counter + action.payload
	}),
	
	DECREMENT: (state, action) => ({
		counter: state.counter - action.payload
	})
}, { counter: 0});

 

 

번외, immutable 익히기

---

1. 객체의 불변성

---

• 객체의 불변성이 언급됨 ( 두 개의 객체에 대하여 값과 객체자체의 동일성은 다를 수 있다는 그거. ==과 equals 그거.)

let list1 = [0,1,2];
let list2 = list1;  //객체가 동일해졌음
list2.push(5) // list2가 변화했는데, 그래도 같을까? 

list1 === list2 //true. (* ===: 엄격한 비교, 변수 유형과 변수 값 비교.)

• 리액트에선 컴포넌트에서 state 혹은 상위 컴포넌트에서 전달받은 props값이 변할 때 렌더링을 해야한다
  • 만약 배열 혹은 객체에 직접 수정시, 내부 값이 수정되었음에도 레퍼런스가 가르킨 곳은 같아 같은 값으로 인식함
  • 이러한 이유때문에 (스프레드 연산자(...))로 기존 값을 가진 새 객체, 배열을 만든 것
  • 이러한 과정의 나쁜 예

  let ex1 = { a:1,	b:{ c:2, d:{ e:3, f:4 } } }
  
  //f를 0으로 업데이트시킨다면
  let ex2 = {
  	...ex1, b:{...ex1.b, d:{ ...ex1.d, f:4} }
  }	
  
  // 복잡하게 생각 안 한다면 아래가 될 거라고 생각했을 것이다 (바뀔 애만 가져와서 지정 바꿈)
  ex1.b.d.f=0; 
  
  

 

• Immutable라이브러리의 setIn을 적용시킨다면?

let ex1 = Map({ a:1, b:Map({c:2, d:Map({e:3, f:4}) }) });
let ex2 = ex1.setIn(['b','d','f'], 0);

 

2. set과 setIn의 차이

---

set: 즉각적인 속성만 설정함, 속성 이름만 사용함

setIn: 데이터 아래의 딥 노드 값(??)을 설정함, 키/인덱스 배열을 사용하여 깊이 중첩된 요소에 도달함

 

 

 

 

 

 

---

참고

Redux 를 통한 React 어플리케이션 상태 관리 :: 4장. Ducks 구조와 redux-actions 사용하기 | VELOPERT.LOG