1. Redux 개념

Redux 개념

1. 액션 (Action)
액션객체는 type 필드를 반드시 가지고 있어야 합니다. reducer함수가 이 type필드값과 이전 state값을 참고해서 새로운 state를 만들기 때문입니다.

// Example 1
{ type: "ADD",
		id : 1,	
}

// Example 2
{ type : "ADD",
	data : {
			id : 1,
			text : 'Have a lunch'
	}
}

2. 액션 생성 함수 (Action create function)
액션생성함수는 액션 객체를 만들어 주는 함수입니다. 액션을 반환합니다.
사실 액션생성함수는 만들지않고 reducer에게 직접 액션 객체를 전달해줘도 매번 만들게 되면 코드에서 실수가 발생합니다.
그래서 미리 함수로 분리해놓고 필요할 때마다 함수를 실행하면 됩니다.

const addNumber = () => {
  return { type: "ADD" };
};

3. 스토어 (Store)
state 값을 store에 저장해서 관리합니다. 스토어에는 저장하고 싶은 사용자의 상태를 저장합니다. createStore함수를 사용하여 만들 수 있으며, 한 개의 프로젝트 당 하나의 store만 가질 수 있습니다.

const store = createStore(countReducer);

어떤 컴포넌트에서든지 변화가 일어날 데이터(상태값)은 모두 하나의 스토어에 넣습니다. 데이터를 한 곳에 모아놓기 때문에 에러가 발생했을 때 각각의 컴포넌트에 가서 값을 확인할 필요없이 데이터가 저장되어 있는 store에 가서 확인하면 됩니다. 스토어만 관리하면 되는 것이죠.

4. 리듀서 (Reducer)
state는 reducer를 통해서만 값을 처리할 수 있습니다.
reducer 전달된 액션(action)과 이전 state값을 가지고 reducer는 어떻게 값을 처리해줘야할지 결정합니다. 실제 값의 변경이 일어나서 reducer가 호출되면 액션(action)에 따라서 값이 바뀌게되고 새로운 state값을 반환합니다.
예를들어 아래의 코드에서는 action.type이 “ADD”가 reducer에게 전달되었을 때, ADD에 해당하는 값을 수정한 뒤 반환합니다.
만약 액션이 “ADD”와 “DELETE”가 아니라면 기존 상태 값을 반환합니다.

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

reducer의 첫번째 매개변수인 state는 처음 호출될 때, undefined 가 됩니다. 그래서 초깃값을 지정해줘야합니다.
 

Store의 내장 함수 4가지

store.dispatch(addNumber); // store.dispatch({ type: "ADD" })

store.subscribe(handleWrite);
store.subscribe(() => console.log(store.getState()));

store.getState();