Back Ground

ReactJS - redux-actions를 이용한 더 쉬운 액션 관리 본문

Javascript/React.js

ReactJS - redux-actions를 이용한 더 쉬운 액션 관리

Back 2018. 12. 14. 21:55


redux-actions를 이용한 더 쉬운 액션 관리


redux-actions 패키지에는 리덕스 액션들을 관리할 때 유용한 createAction과 handleActions 함수가 있다.


이 함수들은 다음과 같이 yarn으로 설치한다.


yarn add redux-acitons

이렇게 불러와 사용 할 수 있다.


1
import {createAction, handleActions } from 'redux-actions';
cs




각 함수의 용도와 사용법

createAction을 이용한 액션 생성 자동화 

리덕스에서 액션을 만들다 보면 모든 액션에게 일일이 액션 생성자를 만드는 것이 번거로울 수 있다.


1
2
3
4
5
6
7
8
9
export const increment = (index) => ({
    type: types.INCREMENT,
    index
});
 
export const decrement = (index) => ({
    type: types.DECREMENT,
    index
});
cs


그냥 파라미터로 전달받은 값을 객체 안에 넣는 것뿐인데,

이를 좀더 편하게 자동화하는 방법이 있지 않을까?

createAction을 사용하면 이 작업을 다음과 같이 편하게 자동화 할 수 있다.


1
2
3
4
5
6
7
8
increment(3);
/*
결과 :
{
    type: 'INCREMENT'
    patload:3
}
*/
cs


전달받은 파라미터가 여러 개일 때는 이전에 setColor액션 생성 함수를 사용할 때처럼 객체를 만들어서 파라미터에 넣어 주면 된다.

액션을 만들면 파라미터로 전달한 객체를 payload로 설정한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
export const setColor = createAction(types.SET_COLOR);
 
setColor({index: 5, color:'#fff'})
/*
결과 :
{
    type: 'SET_COLOR'
    payload: {
        index:5,
        color:'#fff'
    }
}
*/
cs


액션이 갖고 있을 수 있는 정보의 이름을 payload값으로 통일함으로써 액션 생성 함수를 한 줄짜리 코드로 작성했다.


어떤 파라미터를 받는지 명시하지 않았기 때문에 헷갈릴 수도 있다!

다음과 같이 createAction의 두 번째 파라미터에 payload  생성 함수를 전달하여 코드상으로 명시해 줄 수도 있다.

1
export const setColor = createAction(types.SET_COLOR, ({index,color}) => ({index,color}) );
cs




- switch 문 대신 handleActions 사용하기


리듀서에 switch문을 사용하여 액션 type에 따라 다른 작업을 하도록 했다. 

이 방식에는 중요한 결점이 있는데

바로 scope를 리듀서 함수로 설정했다는 것이다.


그렇기 때문에 서로 다른 case에서 let이나 const를 사용하여 변수를 선언하려고 할때 

같은 이름이 중첩되어 있으면 문법 검사를 하면서 오류가 발생한다.


1
2
3
4
5
6
7
8
9
const reducer = handleActions({
  INCREMENT: (state, action) => ({
    counter: state.counter + action.payload
  }),
 
  DECREMENT: (state, action) => ({
    counter: state.counter - action.payload
  })
}, { counter: 0 });
cs


첫 번째 파라미터로는 액션에 따라 실행할 함수들을 가진 객체를 넣어주고,

두 번째 파라미터로는 상태의 기본 값( initialState )을 넣어준다.



'Javascript > React.js' 카테고리의 다른 글

React - Redux 기초 작업  (0) 2019.02.03
VSCODE - Debuging Mode ( Debugger for chrome )  (0) 2018.12.16
ReactJS - Ducks 파일 구조  (0) 2018.12.14
ReactJS - Immutable.js  (0) 2018.12.02
ReactJS - PureComponent vs Component  (0) 2018.12.01
Comments