Redux

Redux

리액트를 위한 state management 툴

global state container

store : React 프로젝트에서 사용하는 모든 동적 데이터들을 담아두는 곳

action : 어떤 변화가 일어나야 할 지 나타내는 객체

reducer : action 객체를 받았을 때 데이터를 어떻게 바꿀지, 어떻게 처리할지 정의하는 객체

의존 모듈

redux

react-redux

npm install --save redux react-redux

앱은 많은 컴포넌트를 기반으로 지어졌는데 또한 동시에 global state를 갖고 있다

유저의 로그인 여부를 global state의 예시로 들면 global state는 모든 컴포넌트가 영향을 받는다

유저가 로그인을 했느냐, 안했느냐에 따라 앱이 어떻게 보이는지도 다르다면

유저 로그인 여부를 모든 컴포넌트들이 알 필요가 있다

그래서 해당 정보를 많은 컴포넌트에 공유하고 싶을 때 이때 공유된 state를 저장하는 방법이 redux이다

redux를 사용하지 않을 경우 로그인여부를 props로 계속 전달해야하고 이를 사용하지 않는 useless props들이 발생할 수 있다

이때 부모 컨테이너에서 물려받는 것이 아니라 redux store에서 가져오게 되면 컴포넌트는 서로에게 props를 줄 필요가 없다

const initialState = {
  isPlaying: false
}

function reducer(state = initialState, action){
  switch (action.type) {
    case START_TIMER:
      return {...state, isPlaying: true}
    default:
      return state;
  }
}

const actionCreators = {
  startTimer
}

export default reducer;

reducer는 언제나 state를 갖게된다

state를 안주면 디폴트로 initial state로 시작한다

redux는 자동으로 액션을 리듀서로 보낸다 (액션을 보낼때마다 redux는 자동으로 reducer를 실행한다 디폴트로)

import reducer from './reducer';
import { createStore } from 'redux';
import { Provider }from 'react-redux';

let store = createStore(reducer);

export default class App extends React.Component {
  render() {
    return (
      <provider store="{store}">
         <app/>
      </provider>
    );
  }
}

Provider의 역할은 스토어를 복사해서 , 자식 컴포넌트에 넣는다