Redux Toolkit

Redux Toolkit이란??

리덕스를 사용하기 위해서 길게 작성해야 했던 코드를 간략하게 작성할 수 있도록 redux에서 나온 도구모음이다

 

이 부분은 강사님이 정리시켰던 내용과 같다. 차이점만 짚고 넘어갈 예정

 

강사님은 redux-actions 라는 모듈을 설치해서 사용했었다.

하지만 노마드는 npm install @reduxjs/toolkit 을 사용했다.

공식 홈페이지에서 npm install @reduxjs/toolkit 를 사용하므로, 후자를 선택함.

 

 

 

 

툴킷이 변화시키는 것은 리듀서함수를 스토어에 등록하는 부분이라는 것을 기억해두자.

 

connect에 익명으로 넣거나 하는 방법, 또는 실제 사용과는 별개의 부분이다.

---

 

1) createAction : action 함수 대체

이제 더이상 id나 text같은 커스텀된 변수이름이 아닌 payload로 사용한다.

 

원래의 코드를 두줄로 간략화 할 수 있다. (이러면 ADD가 없어지므로 switch도 고쳐주어야 한다)

createAction으로 만들어진 함수를 아래처럼 출력해보면 아래와 같다.

 

기존에는 없던 payload라는 속성이 생긴것을 알 수 있다. 여기서 문제가 생긴다.

원래 아래처럼 action이 가지고있던 text나 id가 더이상 존재하지 않기 때문에 undefined를 받아오게 되고, toDo목록에 추가해도 아무런 값이 보이지 않게 되는 것이다.

아래처럼 바꿔주면 된다.

 

 

 

---

 

 

 

여기서 text나 id란 이름없이 action.payload로 퉁칠수 있는 이유는 원래 아래처럼 커스텀으로 만들던 객체를 createAction이라는 함수로 만들어 주었기 때문이고, createAction은 type과 payload만 가지고 있기 때문이다.

 

 

 

설명을 조금 추가하자면, 여기서 보내는 텍스트란 녀석은 명시적으로 알려주기 위한 용도일 뿐이지

{text : 내용} 으로 전달되지 않는다. 실제로는 {payload : 내용} 으로 전달되는 것이다.

 

 

 

 

---

정리

action함수와 변수대신 createAction()함수 변수를 생성해준다.

switch문의 case를 변수나 문자열이 아닌 액션함수.type으로 수정한다.

리턴하는 값에서 action.변수이름이 아닌 action.payload로 수정한다.

(리듀서 함수파일 한정으로만 변경하면 된다)

 

 

 

 

---

2) createReducer()

 

이제 더이상 switch문을 사용하지 않는다.

또한 state를 불변성으로 리턴시키지 않는 방법에 추가로,

리턴시키지 않고,  state를 직접 변경 가능해진다. 불변성을 유지하는 일은 immer가 알아서 내부적으로 해준다.

(ex_배열.push)

 

첫번째 인수로는 initialState(state 기본값), 두번째인수로는 객체를 받는다.

그리고 각각의 action이름을 함수로 정의해주면 되는데, 배열안에 넣어주어야 한다. (이유는 모르겠다.)

 

아무튼 이렇게 변경하면 된다. (filter 대신 뭘 사용할 수 있는지 찾아보자)

 

 

 

---

3) configureStore()

 

크롬 웹스토어에 Redux DevTools 해서 설치

createStore(reducer)를 대신하는 함수이다. 이 함수를 사용하고, 크롬에 Redux Dev Tools를 설치하면 Redux Dev Tools로 여러 기능을 사용할 수  있다.

(직접 dispatcher를 통해 dispatch를 실행할 수도 있고, 리덕스를 사용하는 사이트를 방문하면 그 사이트의 state를 확인해볼 수도 있다.) (그 말은 state에 민감한 정보를 넣으면 안된다는 의미이기도 하다)

 

createStore()와 달리  reducer를 객체에 넣어서 인수로 전달해준다.

configureStore({reducer})

 

 

---

4) createSlice()

 

reducer뿐만아니라 action도 생성해주는 함수이다. 더 간결하게 리듀서를 생성 가능하다. (내용을 캡슐화한다고함)

 

아래와 같이 reducers로 바로 액션에 맞는 함수를 생성할 수 있으며, 리듀서.actions의 출력으로 확인 가능하다

(함수이름을 배열로 감싸지 않는것에 유의)

(물론 지금 저렇게 바꾸면, add가 아닌 addTodo로 쓰던애들때문에 에러남)

 

const toDos = createSlice({
    name: 'toDosReducer',
    initialState : [],
    reducers : {
        add : (state, action)=>{
            state.push({text : action.payload, id : Date.now()})
        },
        remove : (state, action)=>{
            return state.filter(element=>element.id !== action.payload)
        }
    }
})
console.log(toDos.actions);

 

actionCreator객체로 쓰던 애들은 아래처럼 비구조화 할당해주면 된다.

(물론 여기도 actionCreator.addTodo 같이 쓰던 부분을 변경해주어야 한다)

(

참고로 실제로 리듀서함수의 이름은 name/reducer이름이 되지만, 사용할때는 상관이 없다

 실제로는 add가 아닌 toDosReducer/add라는 것이지만 아래처럼 export하기 때문에 app로 사용하게된다.

)

export const {add ,remove} = toDos.actions

 

이렇게 하면  아래의 코드들이 위의 creatorSlice 하나로 대체가 가능해진다.

const addTodo = createAction("add")
const removeTodo = createAction("remove")

export const actionCreator = {
    addTodo,
    removeTodo
}

const reducer = createReducer([], {
    [addTodo] : (state, action)=>{
        state.push({text : action.payload, id : Date.now()})
    },
    [removeTodo] : (state, action)=>{
        return state.filter(element=>element.id !== action.payload)
    },
})

 

---

store에 등록할 때는 리듀서이름.reducer로 등록하면 된다. (reducers가 아니다)

const store = configureStore ({reducer : toDos.reducer})

https://redux-toolkit.js.org/api/createSlice

 

 

---

rootReducer 부분

combineReducers()라는 함수를 이용해서 리듀서를 하나로 합칠 수 있다. (rootReducer 대체)

 

 

 

추가적으로 reducers에 추가해준 리듀서 객체에 바로 함수를 넣지 않고, reducer와 prepare 속성으로 나누어 넣을수도 있고, 따로 extraReducers라는 속성을 추가할수도 있는데 지금 있는 정보만으로도 너무 머리가 아파서 나중에 볼 것

 

 

---

리듀서 함수부분은 툴킷으로 간결하게 만들고,

 

실제 사용은 mapStateToProps와 mapDispatchToProps를 간략하게 connect에 바로 넣어버리는 방법으로 간결하게 만들 수 있을 것이다.

 

너무 많은 정보이기 때문에, 이렇게 분류해서 기억을 하고 있어야 헷갈리지 않고 잘 사용할 수 있을 것이다.

(리듀서 부분 간결화와 커넥터?부분 간결화를 따로 분류해서 기억하자)