Redux 코어 구현해보기 CreateStore, reducer, dispatch

리액트에서 props 에 props 타고 내려가는 상태의 물림을 없애기 위해 redux 상태관리 툴이 탄생했다.

리덕스의 state의 전역 객체의 데이터를 여러 컴포넌트에서 참조해서 사용하고, 변경하는 것이 기본적인 개념이다. 

 

이번 포스트에서 Redux의 코어 기능을 구현해보려고 한다. 

컨셉을 이해하자. 리덕스의 컨셉은 전역 상태가 필요하다

실제로 여러 컴포넌트에서 리덕스의 상태를 가져다 쓰는데 전역 상태라는 전제 때문에 A라는 데이터를 b,c 컴포넌트에서 여기저기서 수정하게 된다면 어디서 수정이 됐는지 찾기가 힘들다.

그렇다면 이런 문제를 어떻게 해소할 수 있을까?

이는 각 컴포넌트가 리덕스 스토어를 직접 수정할 수 없도록 구현할 수 있다. 

그리고 상태를 수정할 수 있는 트리거만을 주고 실제로 수정은 리덕스 내부에서 할 수 있게 하는 것이다. 

그러면 잘못 수정되는 것이 있을 때 어디서 잘못됐는지를 알 수 있다.

이것이 리덕스의 컨셉이다. 

 

리덕스는 이러한 목표를 달성할 수 있게 해주는 몇 가지 도구를 제공한다. 

해당 기능들을 구현하기 위해 redux.js 파일과 index.js파일을 만들어주겠다.

 

redux.js

export function createStore() {
	let state;
    
    return {
    
    }
}

 

index.js

import { createStore } from "./redux.js";

const store = createStore();

 

 

리덕스의 가장 핵심적인 부분의 거의 90퍼라고 할 수 있는 createStore함수를 만들어줬다.

createStore는 store객체를 리턴하는데, 내부에서는 전역 상태를 가지는 state가 선언되어있고, 

store를 받을 객체를 반환해준다.

 

우리가 원하는 데이터를 state에 업데이트 해줄 수 있는 함수를 정의해보겠다.

리덕스의 개념에서 state의 데이터를 직접적으로 변경하는 함수를 reducer라고 칭한다. 

이 함수의 이름은 reducer가 된다.

import { createStore } from "./redux.js";

function reducer(state, action) {
	return state = {...state, ...action.payload}
}

const store = createStore(reducer);

 

이렇게 reducer 함수를 선언했다. 우리가 익히 아는 것처럼 reducer는 현재 state와 {type: 'COUNTER',  payload: {counter: 1}} 형태의 action을 인자로 받는다. 

위 reducer에서는 간단하게 payload의 값을 state에 업데이트를 해주는 형태로 되어있다. 

 

우리는 store 내부에서 state값을 바꾸는 저 reducer를 스토어 내부에서 사용할 수 있도록 해야하기 때문에 createStore에 reducer를 인자로 받아 사용한다. 

 

우리는 외부에서 리덕스 내부의 값을 바꿀 수 없게, 리듀서를 호출해 값을 바꿔주는 함수를 리덕스 내부에 만들어 사용한다. 

그 함수가 바로 dispatch이다. 

export function createStore(
  reducer // 리덕스를 수정할 수 있는 유일한 함수 리듀서를 param으로 받는다.
){
  let state;
  // 컴포넌트가 보낸 리듀서를 리덕스 내부에서 실행시킨다. 
  function dispatch(action) {
    state = reducer(state, action);
    return state
  }
  
  return {
    dispatch,
  }
}

createStore내부에 dispatch함수를 만들어줬다.

이 함수는 액션으로 타입과 payload를 받아, 리듀서에 현재 스토어 내부의 상태와 함께 넘겨준다.

이 리듀서는 우리가 index.js에 선언해둔 그 리듀서이고, createStore내부의 state를 넘겨받고, 리듀서 내부에서 액션의 payload값으로  createStore내부의 state를 업데이트한다.