React Toolkit - counter

configStore.js

// 중앙 데이터 관리소(store)를 설정하는 부분
import { configureStore } from "@reduxjs/toolkit";
import counter from "../modules/counter";

// AS-IS : 일반 리듀서
// const rootReducer = combineReducers({
//   // 리듀서들!
//   counter,
// });
// const store = createStore(rootReducer);

// TO-DO : Redux Toolkit
const store = configureStore({
  reducer: {
    counter,
  },
});
export default store;

conuter.js

import { createSlice } from "@reduxjs/toolkit";

// action value
// const PLUS_ONE = "counter/PLUS_ONE";
// const MINUS_ONE = "counter/MINUS_ONE";

// export const plusOne = () => {
//   return { type: PLUS_ONE };
// };

// export const minusOne = () => {
//   return { type: MINUS_ONE };
// };

const initialState = {
  number: 0,
};

// const counter = (state = initialState, action) => {
//   switch (action.type) {
//     case PLUS_ONE:
//       return { number: state.number + 1 };
//     case MINUS_ONE:
//       return { number: state.number - 1 };
//     default:
//       return state;
//   }
// };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    plusNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

export default counterSlice.reducer;
export const { minusNumber, plusNumber } = counterSlice.actions;