이론 : https://heokknkn.tistory.com/20
안녕하세요 !
이번엔 저번 이론에 이어서 바로 실습과 사용을 왜 하면 좋은지에 대해서 바로바로 실습에 들어가겠습니다 !
저번에 밑에와 같은 그림이 기억나시나요?
이것을 보면서 바로 들어가보겠습니다 !!
Store생성
먼저 ! 상태들을 총 관리하는 Store부터 생성해봅시다 !
# NPM
npm install @reduxjs/toolkit
or
# Yarn
yarn add @reduxjs/toolkit당연히 설치를 먼저해주세요 !!
밑에 그림처럼
그런다음에 먼저 createStore를 만들어주세요 !!!
또한
configureStore에 대하여
/* eslint-disable react-hooks/rules-of-hooks */
import { combineReducers, configureStore } from '@reduxjs/toolkit'
// ↓ 관리 할 Slice
import kkanaReducer from '../components/slice/kkanaSlice'
// ↑ 관리 할 Slice
const rootReducer = combineReducers({
kkana: kkanaReducer,
})
export type RootState = ReturnType<typeof rootReducer>
const store = configureStore({
reducer: rootReducer,
})
export default store순서대로 설명하겠습니다 !!!
먼저 !!! 1번에서 스토어를 생성해줍니다 !!
https://redux-toolkit.js.org/api/configureStore
공식문서에는 위에 있습니다 !
1. configureStore：기존에 createStore와 달리 , 여러개의 인자 대신에 이름이 지정된 하나의 object를 받습니다 ! 그래서 reducer을 넘겨줍니다 !
2. Slice를 만들어줘서 action, reducer을 동시에 써줍니다 !!! 이건 밑에서 더 설명하겠습니다 !
3. 정의 한 스테이트들을 반환시켜서 사용 할 수 있습니다 !
createSlice에 대하여
import { createSlice } from '@reduxjs/toolkit'
export const initialState = {
testValue: 0,
testValue2: false,
}
export const kkanaSlice = createSlice({
name: 'kkana',
initialState,
reducers: {
kkanaReducer: (state, action) => {
state.testValue = action.payload
},
},
})
export const { kkanaReducer } = kkanaSlice.actions
export const kkanaCounter = (value: number) => {
return (dispatch: any): void => {
dispatch(kkanaReducer(value+1))
}
}
export default kkanaSlice.reducer먼저 createSlice에 대해서 입니다.
https://redux-toolkit.js.org/api/createSlice ←공식문서
- name : 해당 모듈의 이름을 작성
- initialState : 해당 모듈의 초기값 세팅
- reducers : 리듀서를 작성. 이때 해당 리듀서의 키값으로 액션함수가 자동으로 생성
- extraReducers : 액션함수가 자동으로 생성되지 않는 별도의 액션함수가 존재하는 리듀서를 정의(선택옵션 잘 쓰는지 몰라요ㅜㅜ)
위에서도 순서대로 설명하겠습니다 !
1. action함수를 만듭니다 !! 그리고 Reducer에게 " 나 수정 했어라고 dispatch를 써서 보내줍니다 !
2~3. createSlice에서 reducers를 만들어주고 ! 사실상 여기서 데이터를 모두 바꿔줍니다 ! ( 똑같이 않아도 되지만 꼭 위에서 한 형식처럼 해주세요 ! )
4~5. 저는 개인적으로 할 때 저런식으로 reducer들만 모아줘서 리턴을 하는게 편했습니다 !
이게 끝입니다 !!! 그럼 한번 components에서 사용해봐야겠죠????
전 간단하게 테스트 했습니다 !!!!
먼저 index쪽입니다 !!!
저런식으로 useSelector을 써서 초기값으로 testValue를 가져와줍니다 !
그러고 나서 dispatch를 이용해서 보내야겠죠??? 전 참고로 action부분에서 간단하게 +1하는 함수를 만들었습니다 !
초기모습입닙다 !!!
그럼 대충 5번정도 클릭하고 볼까요??
+5가 됐습니다 ! 그러면 한번 about페이지로 갈건데 가기전에 about의 소스를 봐봅시다 !
그냥 testValue를 가져만 오게 하고 !!! 저 화면으로 가봅시다 !
짠 !!! 성공했습니다 !!!!
이렇게 해서 정말 쉽게 상태관리하는 방법을 배워보았습니다 !!!
이번 리덕스를 진행하면서 저만의 생각을 많이 넣어봤는데요 !!
저는 처음에 어려웠는데 정말 손쉽게 가능하더라구요 !!!!
부족한점이 있으면 언제든지 말씀해주시고 모르는것들이 있으면 언제든지 질문해주세요 !!
또한 ! 처음에 상태관리를 할 때 useEffect를 해줘서 처음에 비동기로 데이터를 넣는 작업을 많이 진행했습니다 !
저 또한 next js로 개발중이며 개발하다가 비동기로 데이터를 넣는 부분이 있으면 또 소개를 할 예정입니다 !!!
아직 부족한게 많지만 ! 더 열심히 발전해나가는 까나가 되겠습니다 !
