리덕스

[개요]

• 보통은 리덕스의 state와 리액트의 state를 같이쓴다 → 리덕스가 복잡해서..

• 복잡한 state는 리덕스로하고 리액트 state는 간단할때 쓴다

• 안정성, state통제 때문에 복잡함에도 리덕스를 이용해서 state를 관리한다

• reducer store action 다미리 정해놔야해서 코드가 장황해진다 → 그래도 안정적이긴하다

• Store → State를 저장 , store 안에 reducer, action 다 있다

• Action → State를 바꾸는 행동

• Dispatch → 액션을 실행

• Reducer → 액션의 결과로 state를 어떻게 재정의할지

  ex) 로그인액션 dispatch시 → isLoggedIn state를 true로

설치 : npm i redux react-redux

[리듀서]

state도 너무 많으면 store 를 여러 reducer로 쪼개는게 좋다 → 항상 루트 state, reducer는 존재해야한다는 전제는 있다

const initState = {
  isLoggedIn: false,
  user: {}
};

// 액션

const LOG_IN = "LOG_IN";
const LOG_OUT = "LOG_OUT";

export const loginAction = {
  type: LOG_IN,
  data: {
    nickname: "스티브"
  }
};

export const logoutAction = {
  type: LOG_OUT
};

// 리듀서

const reducer = (state = initState, action) => {
  switch (action.type) {
    case LOG_IN: {
      return {
        ...state,
        isLoggedIn: true,
        user: action.data
      };
    }
    case LOG_OUT: {
      return {
        ...state,
        isLoggedIn: false,
        user: null
      };
    }

    default:
      return state;

  }
};

export default reducer;