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-reduxconnect()와 같은 헬퍼를 통해 접근한다. 여러 액션 생산자를dispatch()에 바인드하기 위해bindActionCreators()를 사용할수도 있다.

results matching ""

    No results matching ""