redux[키워드]

참고) https://react.vlpt.us/redux/01-keywords.html

액션

• 상태에 어떤 변화가 필요할 때 액션 발생
• 액션은 하나의 객체로 표현된다.
• type 필드는 필수적으로 가지되, 그 외 값들은 개발자 맘

{
 type: "TOGGLE_VALUE",
 data: {
    id: 0,
    text: "리덕스 배우기"
  },
 text: "안녕하세요"   
  
}

액션 생성함수

• 액션을 만드는 함수
• 단순히 파라미터를 받아와 액션 객체 형태로 만들어준다.
• 나중에 컴포넌트에서 쉽게 액션을 발생시키기 위함이다. (액션 생성함수를 사용하는 것이 필수적이지 않다. 액션을 발생시킬 때마다 직접 액션 객체를 작성할 수도 있다.)
• 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용한다.

export function addTodo(data){
	return{
    	type: "ADD_TODO",
        data
    };
}

혹은, 화살표 함수로도 만들 수 있다.

export const changeInput = (text) => ({
	type: "CHANGE_INPUT",
  	text
});

리듀서

• 변화를 일으키는 함수
• 두가지 파라미터를 받아온다.
• 현재 상태와 액션을 전달받는다.

function reducer(state, action){
	return alterdState
}

• 전달받은 상태와 액션을 참고해 새로운 상태를 만들어 반환한다.
• 여러개의 리듀서를 만들고 합쳐서 Root Reducer를 만들 수 있다.

function counter(state, action){
	switch(action.type){
      case 'INCREASE':
        return state + 1; 
      case 'DECREASE':
        return state - 1;
      default:
        return state; //기존 state를 그대로 반환하도록 한다. 
    }
}

스토어

• 한 애플리케이션당 하나의 스토어
• 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

디스패치

• 스토어의 내장함수 중 하나
• 액션을 발생시키는 것
• dispatch 함수에 액션을 파라미터로 전달한다 dispatch(action)
• 호출하면, 스토어는 리듀서 함수를 실행시켜서 액션을 참고해 새로운 상태를 만든다.

구독(subscribe)

• 스토어의 내장 함수 중 하나
• 함수 형태의 값을 파라미터로 받아온다.
• subscribe 함수에 특정 함수를 전달하면, 액션이 디스패치 되었을 때마다 전달해준 함수가 호출된다.
• 리액트에서 이 함수를 직접 사용하는 일은 별로 없다.
• 대신에, react-redux 라이브러리에서 제공하는 connect, useSelector Hook을 사용해 리덕스 스토어의 상태에 구독한다.