React와 Redux

TOC

1. React에서 Redux 사용하기

개념을 먼저 잡아주자.

• createStore는 인자로 reducer를 받는다

• reducer는 함수이다.

• reducer는 인자로 state, action을 받는다.

• state는 Redux에서 관리할 state값이고 action은 dispatch를 통해 type과 size를 받아 얼만큼 변화시킬것인지를 받는다.

• dispatch는 reducer에게 action을 건네준다.

• dispatch는 type:ex)'INCREMENT', 'DECREMENT'등 할 행위를 정하고 size는 dispatch를 호출한 component의 내부 state값을 기반으로 size를 전달한다.

• reducer는 호출하든 하지 않든 무조건 한 번은 실행이 된다.

• dispatch는 reducer에 action을 넘겨준다 reducer는 prev state 값을 가지고 있다.

• subscribe함수는 store의 state값이 변경되면 실행된다.

// button
      <button
        onClick={() => {
          store.dispatch({ type: 'INCREMENT', size: state.size });
        }}>
        +
      </button>

/// store
const reducer = (state, action) => {
  if (state === undefined) {
    return { number: 0 };
  }
  if (action.type === 'INCREMENT') {
    return { ...state, number: state.number + action.size };
  }
};

버튼을 누르면 dispatch가 작동, type, size를 reducer.action에 넘겨준다.

reducer는 state를 어떻게 만들어내는가

첫번째 실행되는 reducer

...
const reducer = (state, action) => {
  console.log(state);
  if (state === undefined) {
    return { number: 0 };
  }
  if (action.type === 'INCREMENT') {
    return { ...state, number: state.number + action.size };
  }
};

export default createStore(reducer);

위 코드를 보면 우선 무조건적으로 한 번 실행되는 store이기 때문에 reducer는 state===undefined scope를 실행시킨다. reducer는 return {number : 0}을 반환하는데 이는 createStore에 반환을 하는 것이다.

store는 이 반환을 받고 store에 값을 업데이트시킨다.

즉 store에서 state를 가지고 있는데 reducer는 number : 0을 store에 저장하고 시작한다는 것이다.

dispatch는 어떻게 store값을 update하는가

dispatch로 실행되는 reducer

import { createStore } from "redux";
const reducer = (state, action) => {
  console.log(state);
  if (state === undefined) {
    return { number: 0 };
  }
  if (action.type === 'INCREMENT') {
    return { ...state, number: state.number + action.size };
  }
};

export default createStore(reducer);

다시 말하지만 dispatch는 reducer에 action을 넘겨준다 reducer는 actiondml type을 보고 어떤 것을 할 지 결정하고, size를 보고 state에 얼만큼의 값을 수정해 store에 저장할지를 결정한다.

subscribe로 store값을 가져다 쓴다.

reducer를 통한 상태관리, dispatch를 통한 업데이트, subscribe를 통한 상태변경에 따른 적용

...
import store from "./store";
export default function App() {
  const [number, setNumber] = useState(store.getState().number);
  store.subscribe(() => {
    setNumber(store.getState().number);
  });
  return (
    <div className="App">

      {number}
      <AddNumber />
    </div>
  );
}

지금까지의 과정을 살펴보면
1. reducer로 store state값을 관리
2. dispatch를 통해 state값을 update
까지 하였다.

값을 store에 등록하고 업데이트까지는 했지만 사용하진 않았다. 사용하는 방법은 생각해보면 이러할 것이다.

store의 state값을 가져다 쓰고 그 state값이 변경되면 자동으로 변경의 영향이 미치게끔 store의 값을 가져오면 된다.

redux의 getState() 함수를 쓰면 되는게 아닌가? 라고 할 수 있지만 getState()는 호출한 그 시점의 값만을 반환하고 그 다음엔 어떤 영향도 주지 않는다.

getState()를 통해 받은 값은 그냥 그 값일 뿐이다.

redux의 subscribe 함수를 사용하도록 하자.

  store.subscribe(() => {
    setNumber(store.getState().number);
  });

subscribe함수는 store의 state값의 변경이 생기면 실행된다.

store값의 변경이 생기면 실행되기 때문에 subscribe를 통해서 받아오는 store의 state는 가장 최신값이 된다.

따라서 subscribe를 통해 받아오는 state값을 react의 setState로 받아주면 최신값이 적용이된다는 것이다.

이 state값을 화면에 뿌려주면 component의 depth에 상관없이 redux를 통해 state를 관리하게 되는 것이다.

지금까지 Redux 업데이트와, 사용을 알아보았다.