Redux Action과 Reducer와 Store의 관계성

📌  파일 구조

 

 

 

📌  actions/index.js

 

// action types
export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";

// actions creator functions
export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId
    }
  }
}

export const removeFromCart = (itemId) => {
  return {
    type: REMOVE_FROM_CART,
    payload: {
      itemId
    }
  }
}

 

reducer 함수에 인자로 전해주고싶은 action들이 가득가득 들어있다.

Redux를 쓰기 전, props로 데이터를 내려보내고 컴포넌트 내부에서 상태 변경 후 끌어올려 업데이트하던 그 시절에 !

상태를 변경시켜주는 함수의 "인자"들을 예쁘게 정리해놓은 거라고 보면 되겠다.

 

컴포넌트 내부에서 상태를 업데이트 시켜줄 때는

기존의 데이터 형식에 맞춘 인자를 전달해야했기 때문에 인자 자체도 구조가 복잡했다. 기억하지 ?

ex. { name: lee, age: 20, height: 190 } => 이 자체를 전달해서 상태를 업데이트 시켜주는 경우가 많았다구 !!

 

action은 "무엇을"만 정의해준다. "어떻게"에 대한 처리 과정은 포함하지 않는 것이 핵심이다. (type과 payload만 😊)

순수한 JSON 형태의 객체여야지만 추후에 History 관리가 편하고, 쉽게 재사용할 수 있다.

 

---

📌  reducers/index.js

 

import { combineReducers } from 'redux';
// itemReducer와 notificationReducer 모두 reducer 함수다 😊
import itemReducer from './itemReducer';
import notificationReducer from './notificationReducer';

const rootReducer = combineReducers({
  itemReducer,
  notificationReducer
});

export default rootReducer;

 

◾  combineReducers

 

서로 다른 Reducing 함수들을 값으로 가지는 객체를 받아서  =>  { itemReducer, notificationReducer }

{ itemReducer, notificationReducer }  == { itemReducer : itemReducer, notificationReducer : notificationReducer }

createStore에 인자로 넘길 수 있는 하나의 Reducing 함수로 바꿔준다. 즉, Function을 리턴한다.

※ combineReducers는 리듀서 계층의 최상위뿐만 아니라 어느 단계에서든 호출할 수 있다 !

※ code 복잡해지면 마음껏 분리하고 마음껏 합치시길 ^!^

 

 

📌  reducers/itemReducer.js

 

import { REMOVE_FROM_CART, ADD_TO_CART } from "../actions/index";
import { initialState } from "./initialState";

const itemReducer = (state = initialState, action) => {

  switch (action.type) {
  
    case ADD_TO_CART:
    
      let copyState1 = Object.assign({}, state);
      copyState1.cartItems = state.cartItems.concat(action.payload);
      return copyState1;
      
    case REMOVE_FROM_CART:
    
      let copyState2 = Object.assign({}, state);
      copyState2.cartItems = state.cartItems.filter((el) => el.itemId !== action.payload.itemId);
      return copyState2;
      
    default:
      return state;
      
  }
}

export default itemReducer;

 

reducer를 작성할 때 지켜야하는 규칙이 있어서 잠깐 짚고 넘어가려한다.

✔  모든 상태가 undefined일때는 첫번째 인수로 주어진 state를 반환해야한다.

✔  reducer는 undefined를 반환해서는 안된다.  =>  undefined 반환되면 에러난다.

✔  state가 undefined로 주어졌을 때도 undefined 반환 X 해당 reducer의 초기 상태를 반환해야한다.

=>  Redux.createStore( combineReducers(...), initialState )를 사용해 초기 상태를 명시하더라도

reducer에 undefined를 전달해서 직접 확인한다고 ... 리덕스ㄷㄷㄷ

 

 

📌  reducers/initialState.js

 

export const initialState = {
  "items" : [
    {
      "id": 1,
      "name": "2021 달력",
      "price": 10000
    },
    {
      "id": 2,
      "name": "슈가슈가룬 슈즈",
      "price": 35000
    }
  ],
  "cartItems" : [
    {
      "itemId": 1,
      "quantity": 3
    },
    {
      "itemId": 2,
      "quantity": 10
    }
  ]
}

 

상태의 초기 정보가 reducer 함수들과 함께 있더라. 데이터의 위치가 신기해서 ㅎㅎ 가져와봤다.

개념적으로보면 store에 초기정보가 들어있을것같았다.

정작 초기 데이터를 다루는 건 reducer 함수들이니까 !! 기억하쟈 😊

앞서 말했듯이 createStore( )함수가 undefined를 보내서 reducer가 초기 State를 안전하게 반환하는지 안하는지 확인도 한다고했으니까, store에 초기 상태를 전달하는 건 큰 의미가 없는 것 같다고 유추해본다. reducer와 초기데이터는 짝궁이라고 생각해야겠다

 

reducer는 데이터의 원본을 처리하는 과정을 한 눈에 볼 수 있는 중요한 위치이다.

 

---

📌  store/store.js

 

import { compose, createStore, applyMiddleware } from "redux";
import rootReducer from '../reducers/index';
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? 
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
  
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

export default store;

 

📍  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

크롬 확장 프로그램에 작성되어 있는 자바스크립트 함수 (리덕스 개발자 도구)

 

◾  compose(...functions)

 

함수를 오른쪽에서 왼쪽으로 조합하는 역할.

 

◾  createStore(reducer, [preloadedState])

 

Redux Store(상태 트리 전체가 보관되어 있는 곳)를 생성. 1개의 앱에 1개의 스토어 ⭐

 

✔  reducer
(Function) Reducing function으로, 변화된 상태 트리를 반환한다.
✔  [ preloadedState ]
초기상태를 전달할 수 있다.
유니버셜 앱의 서버나 이전의 직렬화된 사용자 세션에서 "상태를 채우기 위해" 선택적으로 지정할 수 있다.
✔  [ enhancer ]
Store Enhancer를 전달할 수 있다. (applyMiddleware( ) 밖에 없음 ^_^)
middleware, third-party feature (time travel , persistance) 기능을 Store에 추가하기 위해 지정할 수 있다.

 

◾  applyMiddleware(...middlewares 미들웨어들)

 

Redux에 Middleware(임의의 함수)를 더해 기능을 확장하는 것을 도와준다.

추가된 여러 개의 미들웨어는 (미들웨어 체인 내에서) 서로의 동작에 영향을 끼치지 않는다.

 

각각의 미들웨어는 Store의 dispatch와 getState 함수를 인수로 받아, 함수로 반환한다.

이 함수는 미들웨어의 디스패치 함수에서 next로 주어지고,  next는 action을 인자로 받아 호출된다.

체인의 마지막 미들웨어는 next의 인자로 원래의 dispatch를 받아 체인을 마무리한다.

최종적으로 반환되는 값은 Store Enhancer로, 주어진 미들웨어를 적용하는 함수이다.

가장 기본의 형태 : ({ getState, dispatch }) => next => action

 

// 코드 예시
import { createStore, applyMiddleware } from 'redux';
import memo from './reducers';

function logger({ getState }) {
  return (next) => (action) => {
    console.log('will dispatch', action)
    
    // Call the next dispatch (in the middleware chain)
    let returnValue = next(action);
    
    console.log('state after dispatch', getState())
    
    return returnValue
  }
}

let store = createStore(
  memo,
  [ 'Use Redux' ],
  applyMiddleware(logger)
);

store.dispatch({
  type: 'ADD_MEMO',
  text: 'Understand the middleware'
})
// (These lines will be logged by the middleware:)
// will dispatch: { type: 'ADD_MEMO', text: 'Understand the middleware' }
// state after dispatch: [ 'Use Redux', 'Understand the middleware' ]

 

📍  여기서 생기는 추가 질문

그렇다면, 미들웨어의 종류에는 어떠한 것들이 있는가?

그리고 미들웨어란 정확이 무엇인가??