포트폴리오5 - Redux Toolkit을 적용해보기

Redux Toolkit을 사용해서 스탯 구현

포트폴리오에서 게임을 진행하면 선택에 따라 스탯이 변한다.

그 스탯의 숫자 값을 Redux Toolkit으로 관리하도록 했다.

실제 코드는 다음과 같다.

statSlice.js

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

const statSlice = createSlice({
    name: 'stat',
    initialState: {value:[70,70,70,70]},
    reducers: {
        changeStat: (state, action) => {
            state.value = action.payload;
        }
    }

})

export const { changeStat } = statSlice.actions;

export const selectStat = (state) => state.stat.value;

export default statSlice.reducer;

• selectStat은 저장된 [70,70,70,70]같은 스탯 값을 export하는 것이다.
• changeStat은 다른 컴포넌트에서 import해서 스탯 값을 업데이트할 때 사용한다.
• export default된 리듀서는 store에서 합쳐진다.

최상위 App.js에서 위 리덕스에서의 상태값들을 사용할 수 있게

App.js

return (
    <>
      <Provider store={store}>
        <Navbar />
        <Outlet />
      </Provider>
    </>
  );
}

Provider 태그로 감싼다. 저기 store={store}라고 전달되는 변수는 바로 위에서 만든 여러 리듀서들을 저장한 저장소라고 보면 된다.

store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import modalReducer from '../features/modal/modalSlice';
import curWeatherReducer from '../features/curWeather/curWeatherSlice';
import statReducer from '../features/stat/statSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    modal: modalReducer,
    curWeather: curWeatherReducer,
    stat: statReducer
  },
});

위에서는 스탯만 설명했지만, 모달창이나 현재 날씨 등도 Slice 파일에서 따로 구현했다

store에서는 이렇게 여러가지 상태값. 들을 하나로 모아서 export한다.

이것을 최상위 컴포넌트에서 Provider로 감싸는 것이다.

이제 그 밑의 컴포넌트들은 useSelect와 useDispatch로 저 저장소에 접근해서 상태값을 가져와서 쓰고,

또 업데이트 할 수 있는 것이다.

기본적으로 이렇게 돌아간다고 생각하면 된다.