Redux

리덕스: 전역 상태관리 툴

1. 전역으로 데이터를 볼 수 있고
2. 이것을 구독하는 컴포넌트들이 있다.
3. 그리고 수정하는 컴포넌트도 있다. (바뀐 값들을 구독한 컴포넌트들도 알아야함)

State

리덕스에 저장된 상태 값
{[key]: value} 형태로 보관됨

Action

상태가 변할때마다 액션을 일으킨다고 함
액션 값을 인식하고 생성함수로 넘기는 것

ActionCreator

액션 생성함수

Reducer

데이터를 바꾸는 함수

Store

리듀서 모음

(action -> actionCreator -> reducer -> store(state에 저장됨))

// Actions
const CREATE = "bucket/CREATE";
const DELETE = "bucket/DELETE";

// 초기값
const initialState = {
  list: ["친구랑 쇼핑하기", "여자친구랑 여행가기", "테니스 치기"],
};

// action Creators(액션을 dispatch 하기 위해 만드는 함수)
export function createBucket(bucket) {
  console.log("액션을 생성했음");
  return { type: CREATE, bucket: bucket }; // 액션 객체 리턴, bucket - 추가할 값
}
export function deleteBucket(bucket_index) {
  return { type: DELETE, bucket_index };
}

// Reducer (수정사항을 바꾸는 곳)
export default function reducer(state = initialState, action = {}) {
  // 기본값 설정 (action에 값이 안들어 온다면 빈 딕셔너리)
  switch (action.type) {
    case "bucket/CREATE": {
      console.log("리듀서에 액션생성값을 넣음");
      const new_bucket_list = [...state.list, action.bucket];
      return { list: new_bucket_list };
    }
    case "bucket/DELETE": {
      console.log(state, action);
      const new_bucket_list = state.list.filter((l, idx) => {
        console.log(
          parseInt(action.bukcet_index) !== idx,
          parseInt(action.bucket_index),
          idx
        );
        return parseInt(action.bucket_index) !== idx;
      });
      console.log(new_bucket_list);
      return { list: new_bucket_list };
    }
    default:
      return state;
  }
}

// configStore.js
import { createStore, combineReducers } from "redux";
import bucket from "./modules/bucket";

const rootReducer = combineReducers({ bucket });

const store = createStore(rootReducer);

export default store;