Redux 2

<Store>
-상태가 관리되는 오직 하나뿐인 저장소의 역할
-redux앱의 state가 저장되어있는 공간.
-createStore메서드를 활용해 Reducer를 연결해서 Store를 생성할수있다.

import { createStore } from 'redux';
const store = createStore(rootReducer);

---

<Reducer>
-dispatch에게서 전달받은 action객체의 type값에 따라서 상태를 변경시키는 함수.
-이때 reducer는 순수함수여야한다. 외부요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문이다.

const count =1
//reducer를 생성할때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {
//action 객체의 type값에 따라 분기하는 switch 조건문입니다.
switch(action.type){
//action === 'INCREASE'일 경우
case 'INCREASE':
      return state + 1
case 'DECREASE':
      return state - 1
case 'SET_NUMBER':
      return action.payload
//해당 되는 경우가 없을땐 기존 상태를 그대로 리턴
default;
   return state;
}
}
//reducer가 리턴하는 값이 새로운 상태가 됩니다.

#만약 여러개의 reducer를 사용하는 경우 redux의 combineReducers 메서드를 사용해서 하나의 reducer로 합쳐줄수있다.

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
counterReducer,
anyReducer,
...
});

---

<action>
-어떤 액션을 취할 것인지 정의해 놓은 객체 
-type은 필수지정. action객체가 어떤 동작을 하는지 명시해주는 역할을 한다.
대문자와 Snake Case로 작성한다. 필요에 따라 payload를 작성해 구체적인 값을 전달한다.

//payload가 필요없는 경우
{ type: 'INCREASE' }
//payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }

#보통 action을 직접 작성하기보다는 action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다.
이러한 함수를 액션 생성자(Action Creator)라고도 한다.

//payload가 필요없는경우
const increase = () => {
return {
type: 'INCREASE'
} }

//payload가 필요한 경우
const setNumber = (num) => {
return {
  type: 'SET_NUMBER',
  payload: num
} }

---

<Dispatch>
-reducer로 action을 전달해주는 함수이다.
-dispatch의 전달인자로 action 객체가 전달된다.
action객체를 전달받은 dispatch함수는 reducer를 호출한다.

//action 객체를 직접 작성하는 경우
dispatch({ type: 'INCREASE' });
dispatch({ type: 'SET_NUMBER', payload: 5 });
//액션생성자(action creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );