[ Redux toolkit] export 되는 과정

모듈

// src/redux/modules/counterSlice.js

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

//액션 크리에이터랑 비슷한 느낌
export const __addNumber = createAsyncThunk(
  // 첫번째 인자 : action value
  "addNumber",
  // 두번째 인자 : 콜백함수
  (payload, thunkAPI) => {
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

const initialState = {
  number: 0,
};

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

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});
console.log(counterSlice.reducer);
// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

해당 코드에서 

빨간 줄을 표시한 두 부분을통해서 counterSlice속의 counter를 export한다

이때

counterSlice.reducer는 위의 사진처럼 찍힌다.

 

 

store ( 폴더 구성)

이렇게 export 했던 counterSlice에서 counter를 import받는다.

그리고 그 카운터를 store에 집어넣는다. (reducer : {counter :counter} ) //키와 벨류의 이름이 같으면  counter라고 사용 가능

import React from "react";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { __addNumber, minusNumber } from "./redux/modules/counterSlice";

const App = () => {
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);
  const dispatch = useDispatch();

 

 

이를 컴퍼넌트에서 import하고 useSelector를 통해서 사용한다.