TIL-37, React-Redux 기본 구현

Redux의 기본적인 흐름과 개념을 머리로는 이해했지만,

손이 기억하지 못하고 있고, 가슴이 이해하지 못하고 있다.

처음부터 아주 간단히 구현해보며 이해해보자.

const { createStore } = require("redux");
const CHANGE_NAME = "CHANGE_NAME";
const ADD_POST = "ADD_POST";

// state
const initState = {
  name: "남훈",
  posts: [],
};

// action
const changeName = (data) => {
  return {
    type: CHANGE_NAME,
    payload: data,
  };
};
const addPost = (post) => {
  return {
    type: ADD_POST,
    payload: post,
  };
};

// reducer
const reducer = (prevState, action) => {
  switch (action.type) {
    case CHANGE_NAME:
      return {
        ...action.prevState,
        name: action.data,
      };
    case ADD_POT:
      return {
        ...prevState,
        posts: [...prevState.posts, action.payload],
      };
    default:
      return prevState;
  }
};

// store
const store = createStore(reducer, initState);

아래 내용은 기술면접 단골 질문이므로, 정확하게 숙지하고 있자!

Redux의 3가지 원칙

1. Single Source of Truth (진실은 하나의 근원으로부터)

• 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다. → Store에

1. State is Read-Only (상태는 읽기 전용)

• 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법 뿐이다. → Action

1. Changes are made with pure functions (변화는 순수 함수로 작성)

• 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 reducer를 작성해야 한다. → Reducer