2. Redux 지켜야하는 규칙

1. 스토어는 하나만 사용하기(단일 스토어)2. 리듀서에 상태는 읽기 전용이다.3. 순수함수로 작성되어야 한다.

1. 스토어는 하나만 사용하기(단일 스토어)

상태를 저장하는 스토어는 하나만 사용합니다. 상태가 한 개 이상이라면 관리해야하는 모든 상태는 하나의 스토어 안에서 객체 구조로 저장해서 사용하면 됩니다.


console.log(store.getState())

{
	quantity : 3,
	disabled : true,
	todos : [{
			text : 'have a lunch',
			completed : true,
	},{
			text : "study Redux",
			completed : false	
	}]
}

2. 리듀서에 상태는 읽기 전용이다.

리덕스는 값을 읽기만 하며 기존에 객체나 배열은 건드리지 않고 새로운 값으로 생성해주어야 합니다. 배열이나 객체는 값은 바뀌어도 주소값은 동일한 성질을 가지고 있기 때문에 React에서도 spread문법을 사용하여 새 배열이나 객체를 만들어주었습니다. 리덕스도 마찬가지 입니다. state값을 바꿔줄 때 기존 state를 수정하지않고 읽어오기만 해야 합니다.


const a = [1,2,3]
const b = a
console.log(a === b) // true
-------------------------------------------------------------
const a = [1,2,3]
const b = [...a]
console.log(a === b) // false
-------------------------------------------------------------
const reducer = (state = [], action) => {
  switch (action.type) {
    case "ADD":
      return [...state,{ text: action.text }];
    default:
      return state;
  }
};

3. 순수함수로 작성되어야 한다.

reducer함수는 반드시 순수함수로 만들어야 합니다.

리듀서 함수는 이전 상태(state)와 액션객체 파라미터에 대해서만 의존해야합니다. 파라미터 외의 값들(외부변수 등)에 영향받으면 안됩니다.


const reducer = (state = 0, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    default:
      return state;
  }
};