정리가 필요한 게시글
핵심 개념
- configureStore로 store를 만든다.
- createSlice로 작은 store를 만든다.
- actionCreator 함수를 자동으로 만들어준다.
- immer.js가 내장 되어 있어서 불변하게 데이터를 처리하지 않아도 된다.
스토어 생성
// 기존의 스토어 생성
let store = createStore(reducer, initialstaate)
toolkit을 사용
configureStore 매서드를 사용해 스토어를 생성한다.
const store = configureStore({
reducer: {
counter:counterSlice.reducer
}
})
객체 형태로 reducer을 넣어준다.
reducer: {
counter:counterSlice.reducer
}
counterSlice는 reducer을 생성할때 담은 변수명이다.
reducer은
createSlice 매서드를 사용해 만들어준다.
const counterSlice = createSlice({
name:"counter",
initialState:{value:0},
reducers:{
"증가":(state, action)=>{
state.value = state.value + action.step
},
"감소":(state, action)=>{
state.value = state.value - action.step
},
}
})
위와같은 형식이다. key값으로는 name, initialstate, reducers가 있다.
기존의 reducer은 액션객체를 받아 값을 갱신하게 될때
return {...state} 와같이 기존의 값을 유지한채 갱신을 해주었지만
toolkit을 사용하면 간단히
state.value = state.value + action.step
위와같이 작성이 가능하다
스토어의 값을 사용할땐
useSelector
const 꺼내온값 = useSelector((state)=>{
console.log(state)
return state.counter.value
})
state.counter.value 이 부분은
name:"counter", initialState:{value:0},
이 부분을 참고하면 된다
state.reducerName.state명
dispatch는 아래와 같은 방법으로 작성이 가능하다
dispatch({type:"counter/증가", step:5})
type:"reducerName/reducers내부의 이름"
혹은 아래 형식으로도 가능하다
기존의 코드는 step으로 증감값을 정해주었지만 ()안의 값은 dispatch호출시 payload라는 값으로 전달이 된다.
state.value + action.step을
state.value + action.payload로 변경해준다.
dispatch(counterSlice.actions.reducers이름(2))
또한
createSlice 로 생성한 reducer은 store을 만들때와 컴포넌트에서 모두 사용하기때문에 별도의 파일로 분리를 해준다.
export는
export default counterSlice
export const {증가} = counterSlice.actions;
처럼 해준다 위는 store.js에서
아래는 해당 리듀서 변수명을 사용해 dispatch를 해주는 파일에 사용한다.
기존의 dispatch에서
dispatch(counterSlice.actions.증가(2))
와 같이 코드의 가독성이 떨어져 export해줄때
const {증가} = counterSlice.actions; 구조분해 할당을 사용해 export해준다.
지금은 개념을 잡아가기위한 과정이지만 앞으로 프로젝트의 복잡도와 api의 양이 방대해질걸 생각하면 redux toolkit을 사용 안하더라도 극복이 가능하지만 개발자경험에 대해서는 toolkit을 사용해 로직을 명확하게 분리하고 코드량이 줄어들 수 있겠다는 느낌을 받게되었다.
combindreducers를 사용하는 경우
const rootReducer = combindReducers({
reducer명 : slice로 나눈 reducer명
})
const store = configureStore({
reducer: rootReducer
})
로 해주면 된당
