Action
액션은 객체다.
액션은 앱에서 스토어로 보내는 데이터 묶음이다. 이들이 스토어의 유일한 정보원이 된다. store.dispath()
를 통해 액션을 보낼 수 있다.
const ADD_TODO = 'ADD_TODO'
{
type: ADD_TODO,
text: 'Build my first Redux app'
}
액션은 평범한 자바스크립트 객체이다. 액션은 반드시 어떤 형태의 액션이 실행될지를 나타내는 type
속성을 가져야 한다. 타입은 일반적으로 문자열 상수로 정의된다. 앱이 커지면 타입들을 별도의 모듈로 분리할 수도 있다.
import {ADD_TODO, REMOVE_TODO}'../actions/types'
반드시 상수를 사용할 필요는 없지만, 액션 타입을 상수로 정의해 사용하면 오타를 냈을때 undefined
가 나와 디버깅하기 쉬워진다.
액션은 가능한 적은 데이터를 전달하는게 좋다. 예를들어 전달하려는 데이터중 일부만 필요하다면 일부만 key와 value로 묶어 전달한다.
const data = {
name: "minwoo",
age: 27,
dog: 2,
education: "univ",
location: "seoul"
}
//bad
{
type: ADD_TODO,
data
}
//good
{
type: ADD_TODO,
name,
age
}
Action Creater
액션생산자는 액션을 만드는 함수이다.
function addTodo(data){
return{
type: ADD_TODO,
name,
dog
}
}
실제로 액션을 스토어로 보내려면 결과값을 dispatch()
함수에 넘긴다.
dispatch(addTodo(text))
아니면 자동으로 액션을 보내주는 바인드된 액션생산자를 만든다.
const boundAddTodo = (text) => dispatch(addTodo(text))
dispatch()
함수를 스토어에서 store.dispatch()
로 바로 접근할 수 있지만, 보통 react-redux의 connect()
와 같은 헬퍼를 통해 접근한다. 여러 액션 생산자를dispatch()
에 바인드하기 위해bindActionCreators()
를 사용할수도 있다.