[React.js] #8 Redux Store(리덕스 스토어)

 

지난 포스팅에 Reducer를 생성하는 부분까지 진행했었는데요.

오늘은 스토어(store)를 생성하고 열심히 생성한 Reducer와 연결시켜주는 부분에 대해서 알아보겠습니다.

 

이번 포스팅은 양이 많지 않으니 조금은 마음 편하게 읽어 내려가셔도 될 것 같아요!

 

 

스토어는 무슨 역할을 할까?

• 애플리케이션의 상태를 저장하고

• getState()를 통해 상태에 접근하게 하고

• dispatch(action)를 통해 상태를 수정할 수 있게 하고

• subscribe(listener)를 통해 리스너를 등록합니다.

 

하나의 어플리케이션에선 하나의 스토어만 운영하는 것을 지향합니다. 각종 상태와 액션을 관리하는 코드가 복잡해지는 경우 리듀서를 분리(리듀서 쪼개기)하여 관리하지만 최종적으로 하나의 리듀서(리듀서 재조합)의 형태로 만들어서 사용하는 것이 좋습니다.

 

그럼 이제 reducer를 가져와서 store를 생성해보겠습니다.

 

# reducer 생성 예제

function counter(state, action) {
  
  switch(action.type) {
    case INCREMENT:
      return state+1
    case DECREMENT:
      return state-1 
    defualt:
      return state
  }
}

function logged( state, action) {
  switch(action.type) {
    case LOG_IN:
      return true
    case LOG_OUT:
      return false
    default:
      return false
  }
    
}

export default function reducer(state = initalState, action) {
  return {
    counter : counter(state.number, action),
    isLogged: logged(state.isLogged, action)
  }
}

 

생성한 리듀서를 가져와 스토어 생성시 파라메터로 넣어줍니다.

 

import { createStore } from 'redux';
import sampleReducer from 'store/reducers';

const store = createStore(smapleReducer);

export default store;

 

이제 스토어도 생성해 주었고 reducer와 연결도 잘 되었는지 한번 확인을 해보겠습니다.

 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increase, decrease, login, logout } from 'store/actions/counter' 
import store from 'store'

console.log(store.getState());

// 상태가 바뀔때마다 기록합니다.
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

// 액션들을 보냅니다.
store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(login());
store.dispatch(logout());

// 상태 변경을 더 이상 받아보지 않습니다.
unsubscribe();

class App extends Component {
  render() {
    return (
      <div> </div>
    )
  }
}

export default App;

 

위와 같이 작성 후 실행해보면 아래와 같은 경과를 얻을 수 있음을 확인할 수 있습니다.

 

 

 

이렇게 오늘은 스토어를 생성하고 dispatch를 발생시켜 정상적으로 등록한 액션에 맞는 작업이 리듀서를 통해 이루어지는지 확인해 보았습니다. 그럼 이만 포스팅 마치도록 하겠습니다!

 

 

탕빠이!