리덕스 기초 1 (~Actions)

https://redux.js.org/basics/basic-tutorial 를 참고하여 정리하였습니다.

리덕스란?#

상태관리 라이브러리
상하위 컴포넌트를 거치지 않아도 값 전달 가능
미들웨어로 다양한작업(비동기, 로깅) 가능

리덕스 기본#

액션#

액션은 어플리케이션으로부터 온 데이터를 스토어에 전송하는 정보의 페이로드(payloads)입니다.

store.dispatch()를 사용하여 스토어에 전송합니다.

const ADD_TODO = 'ADD_TODO'
{
    type: ADD_TODO,
    text: 'Build my first Redux app'
}

액션은 자바스크립트 객체입니다.
type 프로퍼티 필수
그 외의 필드는 자유롭게 (참고 플럭스 스탠다드 액션)

::: warning 소규모 프로젝트가 아니라면 module로 따로 만드느 것을 추천함. 참고: 별도의 상수로 만드는 것의 이점 :::

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

based on the todo#

todo를 array에서 보관할 계획이므로 index 프로퍼티를 추가해주자. 상용 앱이라면 유니크한 ID를 매번 생성해주는 것이 좋을 것.

{
    type: TOGGLE_TODO
    index: 5
}

그리고 가시화된 todo를 바꿔줄 하나의 액션을 더 추가하자

{
    type: SET_VISIBILITY_FILTER,
    filter: SHOW_COMPLETED
}

액션 생성함수 (Action Creator)#

파라미터를 받은 뒤 액션 객체형태로 주는 역할.

function addTodo(text){
    return {
        type: ADD_TODO,
        text
    };
}

// 또는
const changeInput = text => ({
    type: CHANGE_INPUT,
    text
})

전통적인 flux 방식 = redux에서 불가능

//불가능
function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text
  }
  dispatch(action)
}

대신 다음처럼 할 수 있음

dispatch(addTodo(text))
dispatch(completeTodo(index))

bound action creater 만들어 자동으로 dispatch 가능

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

이제 위위 코드 대신 다음을 실행

boundAddTodo(text)
boundCompleteTodo(index)

dispatch()는 스토어에서 store.dispatch()로 곧바로 접근 가능하나, react-redux의 connect() 같은 헬퍼함수를 이용한다. bindActionCreators()로 여러 액션들을 자동으로 dispatch() 함수에 바인딩 시킬 수 있다.

액션 생성함수는 비동기적일 수 있으며, 사이드이펙트(side-effects)를 가지고 있을 수 있다. 고급 튜토리얼의 비동기 액션을 읽고 AJAX 요청과 비동기적인 컨트롤 플로우 안에서 액션 생성함수를 다루는 것을 배울 수 있다.

사이드 이펙트는 함수 외부의 상태를 변경하는 것을 말한다.

Source Code#

`action.js`#

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}