redux(toolkit)를 사용하여 전역으로 music state 관리하기

1. 전역으로 관리해주는 store 생성

// redux/config/configStore

const store = configureStore({
  reducer: {
    musicPlayer: musicPlayer,
    isPlaying: isPlaying,
  },
})

export default store

2. modules 만들기

  1) music을 담는 state들을 관리하는 module

const musicSlice = createSlice({
  name: 'musicPlayer',
  initialState,
  reducers: {
    setMusicPlay: (state, action) => {
      state.imageUrl = action.payload.imageUrl
      state.musicTitle = action.payload.musicTitle
      state.composer = action.payload.composer
      state.musicId = action.payload.musicId
      state.musicUrl = action.payload.musicUrl
    },
  },
})

export default musicSlice.reducer
export const { setMusicPlay } = musicSlice.actions

  2) 음악이 재생 되는지 아닌지 관리해주는 state

const isPlayingSlice = createSlice({
  name: 'isPlaying',
  initialState: isPlayingInitialState,
  reducers: {
    setIsPlaying: (state) => {
      state.state = true
    },
    setTogglePlaying: (state) => {
      state.state = !state.state
    },
  },
})

export default isPlayingSlice.reducer

export const { setIsPlaying, setTogglePlaying } = isPlayingSlice.actions

 3. dispatch를 통해 state 관리

  1) dispatch를 사용하여 관리하기

// useDispatch를 사용하여 dispatch 함수를 선언함
const dispatch = useDispatch()

// dispatch 안에 setIsPlaying을 하여 재생 이미지로 바뀔 수 있도록
dispatch(setIsPlaying())

// setTogglePlaying을 사용하여 재생, 일시정지 구현
dispatch(setTogglePlaying())

// setMusicPlay를 통해 music을 관리
dispatch(setMusicPlay(data))

4. useSelector를 통해 store에서 관리되는 state 가져오기

const data = useSelector((state: RootState) => {
    return state
})

5. 알게된 점

  redux를 사용하여 기본적으로 어떻게 돌아가는지 다시 한 번 상기시킬 수 있었고, 이전에 비해 이해가 더 많이 되었던 것 같다. 부족한 부분이 많지만 조금 더 활용하여 프로젝트를 진행하거나 기능을 더 추가하고 싶다.