Redux 기본 사용 방법

redux는 크게 action, store, reducer로 구분된다.

store를 중심으로 돌아간다고 생각하면 쉽다.

 

npm i redux 명령어로 redux를 설치한 뒤

먼저 store 모듈부터 만들자.

 

const { createStore } = require('redux');

const reducer = require('./reducer');

 

const store = createStore(reducer);

 

module.exports = store;

 

// store.js로 저장

 

store를 만들 때 reducer라는 함수를 넣는 것을 볼 수 있다.

store에 저장된 값인 state를 변경할 때 이 함수를 사용하기 때문이다.

이를 위해 reducer 모듈도 만들자.

 

let lastId = 0; // id 값을 위한 변수

 

function reducer(state = [], action) { // 'state = []'는 state의 초기값

    if(action.type === 'add') {

        return [

            ...state,

            {

                id: lastId++,

                description: action.description

            }

        ];

    } else {

        return state;

    }

}

 

module.exports = reducer;

 

// reducer.js로 저장

 

store에 저장된 값을 변경하려면 아래처럼 dispatch 메소드에

action인 객체를 넣어준다.

 

store.dispatch({

    type: 'add',

    description: 'first'

});

 

그러면 reducer 메소드가 실행되고

이 action의 type에 따라 store의 state에

새로운 배열이 저장된다.

여기서의 state는 store의 데이터를 담아두는 곳이라고 할 수 있다.

 

reducer는 pure function이어야 하기 때문에 

값을 변경할 때 깊은 복사를 해야 한다.

그래서 아래처럼 복잡한 코드를 리턴한다.

 

return [

    ...state, // state 배열의 값을 deep 복사해 넣는다.

    { // 바뀌는 부분만 따로 선언해준다.

        id: lastId++,

        description: action.description

    }

];

 

이렇게 store 모듈과 reducer 모듈을 마련해 놓고

다음과 같이 redux를 쓸 수 있다.

 

const store = require('./store');

 

const unsubscribe = store.subscribe(() => { // store가 변경될 때마다 호출

    console.log('store가 변경됐습니다.');

    console.log(store.getState()); // store에 저장된 값을 보여준다.

});

 

store.dispatch({ // add라는 action으로 reducer가 실행된다.

    type: 'add', // type은 반드시 들어가야 한다.

    description: 'first' // 이 부분부터는 자유롭게 고칠 수 있다.

});

 

// app.js로 저장

 

위 코드를 실행하면 다음의 값이 state에 들어간다.

[ { id: 0, description: 'first' } ]

 

위의 unsubscribe 변수에는 리턴 값으로 함수가 들어가게 되는데

unsubscribe();를 호출하면 그 아래 코드부터는 dispatch를 한다고 해도

store.subscribe 내부의 함수가 실행되지 않는다.

경우에 따라서 값을 보여줄 필요가 없을 때 쓴다.