[코딩일기] Redux combineReducers(), createStore() 흐름 이해

Redux의 combineReducers()

여러 파일에 나눠서 작성한 리듀서즈(reducers)를 합치는 역할을 한다.

 

export const ADD_TODO = 'ADD_TODO';

export const COMPLETE_TODO = 'COMPLETE_TODO';

 

export function addTodo (text) {

  return {

    type : ADD_TODO, 

   // action에 type이 필요한 이유는,

   // type에 따라 Reducer에서 상태를 어떻게 변경할지, 어떤 작업을 처리할지 판단하기 위함

    text,

  };

}

 

// export와 export default의 차이점?

export function completeTodo (index) {

  return {

    type: COMPLETE_TODO,

    index,

  }

}

 

// ------------------------------------------------------------------

export const SHOW_ALL = 'SHOW_ALL';

export const SHOW_COMPLETE = 'SHOW_COMPLETE';

export function showAll () {

  return {type: SHOW_ALL}

}

export function showComplete () {

  return {type: SHOW_COMPLETE}

}

 [actions.js]

todo의 상태를 관리하는 action(addTodo, completeTodo)과 

filter를 관리하는 action(showAll, showComplete)이 있다.

// export와 export default의 차이점?

 

import { ADD_TODO, COMPLETE_TODO } from '../actions'

const initialState = [];  

export default function todos (previousState = initialState, action) {

  if(action.type === ADD_TODO) {

    return [...previousState, { text: action.text, done: false }];

  }

  if (action.type === COMPLETE_TODO) {

    return previousState.map((todo, index) => {

        if(index === action.index) {

          return { ...todo, done: true }

        }

        return todo;

    });

  }

  return previousState;

}

[reducers/todos.js]

todo의 상태를 관리하는 action을 받아서 'todos.js' reducer를 만들었다.

(addTodo랑 completeTodo)

 

 

import { SHOW_ALL, SHOW_COMPLETE } from '../actions';

const initialState = 'ALL';

export default function filter (previousState = initialState, action) {

  if (action.type === SHOW_COMPLETE) {

    return 'COMPLETE';

  }

  if (action.type === SHOW_ALL) {

    return 'ALL'

  }

  return previousState;

}

[reducers/filter.js]

 

import { combineReducers } from "redux";

import todos from './todos';

import filter from './filter';

const reducer = combineReducers({

  todos,

  filter,

});

export default reducer;

[reducers/reducers.js]

reducers를 합쳐준다.

1. filter.js와 todos.js에서 만든 reducers 함수를 하나로 합쳐준다.

2. createStore에 사용하기 위해 export 한다.

(reducers가 특별한 일을 하는 건 아니고 그냥 거쳐가는 느낌)

 

import { createStore } from 'redux';

// todoApp은 filter.js와 todos.js reducers를 합친

// const reducer이다.

import todoApp from './reducers/reducers';

const store = createStore(todoApp);

export default store;

[store.js]

store를 만들어 준다.

1. 합친 reducers를 todoApp이라는 이름으로 import한다.

2. todoApp을 createStore()에 전달한다.

(createStore()는 'dispatch()', 'subscribe()', 'getState()'라는 함수를 갖고 있다.)

=> createStore()는 filter.js와 todos.js reducers 함수를 받아서 준비된 상태

 

  import React from 'react';

  import ReactDOM from 'react-dom/client';

  import './index.css';

  import App from './App';

  import reportWebVitals from './reportWebVitals';

  import store from './redux/store';

  import { addTodo, completeTodo, showComplete } from './redux/actions';

  store.subscribe(() => {

    console.log(store.getState());  

  });

console.log(store)

  store.dispatch(addTodo('할일'));

  store.dispatch(completeTodo(0));

  store.dispatch(showComplete());

  const root = ReactDOM.createRoot(document.getElementById('root'));

  root.render(

    <React.StrictMode>

      <App />

    </React.StrictMode>

  );

  reportWebVitals();

[index.js]

store.dispatch()에 '함수'를 인자로 전달.

전달하는 함수는 action에 있는 객체를 만드는 함수!

 

1. action에 있는 객체를 만드는 함수를 받는다.

2. 받은 action 함수를 store에 전달한다. store는 'createStore()'라는 함수를 갖고 있다.

createStore()에는 '함수'를 인자로 전달한다.

(createStore()는 'dispatch()', 'subscribe()', 'getState()'라는 함수를 갖고 있다.)(createStore()는 todoApp이라는 combine된 reducers의 함수들을 갖고 대기 중)

 

store.dispatch(addTodo('할일')은,store.dispatch(createStore(todoApp([...previousState, {text: function addTodo ('할일') > text : '할일', done: false}]));

이런 식으로 연결되어 dispatch 된다!