REDUX AGAIN!!!!! (기본)

일단 키워드부터 정리 좀 해보자.

액션 (Action)

상태에 변화를 줘야할 때, 액션을 발생시켜 함. 액션은 하나의 객체로 표현 됨.

{
  type: "ADD_VALUE",
  data {
    id:0,
    text: 'LEARN REDUX'
}

이 중에서, type은 Action이 항상 갖고 있어야 되는 거고, data는 내가 임의로 넣은 것. 개발자 마음대로 필요한 것을 넣어줄 수 있음.

Action은 그러면 어떻게 만듬?

저거 그냥 객체 형태로 됐는데 어떻게 쓰라는 거야?

=>

액션 생성 함수가 있다. (Action Creator)

단순히 파라미터를 받아와서 액션 객체 형태로 만들어줌.

export function addTodo(data) {
  return {
    type : 'ADD_TODO',
    data
  };
}

==
  
export const changeInput = (text) => ({
  type: 'CHANGE_INPUT',
  text
});

리듀서 (Reducer)

리듀서는 변화를 일으키는 함수. 리듀서는 2가지 파라미터를 받아옴.

function reducer(state, action) {
  //상태 업데이트 로직
  return alteredState;
}

리듀소는 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환함.

만약 카운터를 위한 리듀서를 작성한다면 다음과 같이 작성할 수 있음.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

여기서 보이는 state값을 사용할 때, initialState값을 정해줘야 함. state값이 정의돼있지 않으면 플러스 마이너스가 무슨 상관이 있겠음

그러므로

//위에 보이는 저 극악무도한 리듀서 함수 위에

const initialState =
      []로 배열,
      {}로 객체,
      34로 숫자형 자료,
      'whatever'로 문자형 자료
      를 넘겨주든 너 알아서 state값에 맞게 잘 보내면 됨.
      
아니면

function counter (state = [] or {} or '' or 34, action)
으로 initialState값 줘도 된다.

스토어 (Store)

리덕스에서는 한 어플리케이션당 하나의 스토어를 만들게 된다. 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

//store.js

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

const store = createStore(chihoReducer);

export default store;

디스패치 (Dispatch)

디스패치는 스토어의 내장함수임. 액션 짜고, 액션 생성하는 함수로 액션 생성하고 마지막으로 액션을 발생시켜야 하는데 이때 디스패치를 쓰면 됨.

store의 값을 변화시키기 위해서 action이 필요한데, 그 action을 actionCreator가 만들어주고 action creater를 담은 Dispatch 열차가 store의 reducer에게 action을 전달해주면 reducer가 action의 type을 보고 그에 맞는 행동을 해주는 것.

출처 한만섭님 블로그. 너무 정리가 잘 되어있음

dispatch라는 함수에 액션을 파라미터로 전달하면 됨. dispatch(action) 이렇게.

//addTodo를 담고 reducer로 향하는 dispatch열차
dispatch(addTodo(text))

구독 (Subscribe)

구독도 스토어 내장 함수. Subscribe 함수는, 함수 형태의 값을 파라미터로 받아옴. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때마다 전다해준 함수가 호출된다.

이거 잘 안씀. react-redux 라는 라이브러리에서 제공하는 connect나 useSelector Hook을 사용함.