[WIL] Redux (feat. tool-kit)

✍️Redux ? 왜 사용하는지 ?

 

Redux란? 왜 쓰는지❓ 

Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리이다. 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 변경하고 관리할 수 있다. 프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가며 props와 state를 관리하는 것이 복잡해지기 때문에 외부에 store를 두고 관리하는 방식이다.

전역상태 라이브러리 중 Context API를 사용하는 것으로 충분하지만, 규모가 큰 경우엔 리덕스로 효율성과 유지 보수성을 높여주는 것이 좋다.

 

Redux의 3가지 원칙 

• 단일스토어
  • 하나의 애플리케이션 내부에는 하나의 스토어를 만들어 사용해야 한다. 여러 개의 스토어를 만들어 사용이 가능하지만 상태 관리가 복잡해지기 때문에 권장되지 않는다.
• 읽기 전용 상태
  • 리덕스는 읽기 전용 상태이다. 읽기 전용 상태인 것은 불변성을 유지되어야하기 때문인데 성능 유지를 위해 데이터 변경시 얕은 비교를 하기 때문이다. *불변성 : 값이나 상태를 변경할 수 없는 것을 의미한다. 
• 순수한 함수 리듀서
  • 리듀서는 변화를 일으켜 새로운 상태를 반환한다. state와 action를 파라미터로 전달받고 파라미터 외의 값에는 의존하지 않도록 조건에 맞는 순수한 함수로 사용해야한다.

Redux 기본 용어

• Store
  • 스토어는 컴포넌트의 상태를 관리하는 저장소 하나의 프로젝트는 하나의 스토어만 가질 수 있다. 
• Action
  • 스토어의 상태를 변경하기 위해, 액션을 생성해야한다. 액션은 객체이며, type을 가져야 한다. 액션 객채는 액션생성함수에 의해 만들어진다.
• Reducer
  • 리듀서는 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수이다.
• Dispatch
  • 디스패치는 스토어의 내장 함수 중 하나이며, 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할이다.
• Subscribe
  • 스토어의 내장 함수 중 하나로, 리됴서가 호출될 때, Subscribe된 함수 및 객체를 호출한다. 

1. UI가 처음 렌더링될 때, UI 컴포넌트는 리덕스 스토어의 상태에 접근하여 해당 상태를 렌더링한다.
2. 이후 UI에서 상태가 변경되면, 앱은 디스패치를 실행해 액션을 일으킨다.
3. 새로운 액션을 받은 스토어는 리듀서를 실행하고 리듀서를 통해 나온 값을 새로운 상태로 저장한다.
4. 서브스크라이브된 UI은 상태 업데이트로 변경된 데이터를 새롭게 렌더링한다.

 

Redux Toolkit? 

리덕스를 라이브러리 없이 사용 시 1개의 액션을 생성해도 액션타입 정의 -> 액션함수 생성 -> 리듀서 정의 의 작업이 필요하다. 많아지는 액션을 관리하기 위해 redux-actions을, 불변성 보존을 위한 immer, store값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위해 reselect, 비동기 작업을 위한 thunk 와 saga 등 리덕스의 유효한 기능을 사용하기 위해 4~5개의 라이브러리를 사용해야 했다.하지만 Redux Toolkit은 내장된 기능으로 saga를 제외한 위의 모든 기능을 제공한다.

---

그래서 ! 바뀐 Redux Toolkit은요

• Simple: 스토어 설정, 리듀서 생성, 불변성 업데이트 로직 사용을 편리하게 하는 기능 포함
• Opitionated: 스토어 설정에 관한 기본 설정 제공, 일반적으로 사용되는 redux addon이 내장
• Powerful : Immer에 영감을 받아 '변경'로직으로 '불변성'로직 작성 가능, state 전체를 slice로 자동으로 만들 수 있음
• Effective : 적은 코드에 많은 작업을 수행 가능

createSlice = action + reducer 

createSlice는 Ducks 패턴을 사용해 action과 reducer를 전부 가진 함수이다.

import axios from 'axios';
import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';

let initialState = {
    poke:[],
    list:[
        {id:1, text:'안녕하세요'}
    ],
    load:false
}

// thunk 생성
export const fetchPoke = createAsyncThunk(
    'news/fetchPoke',
    async () => {
        const res = await axios.get('https://pokeapi.co/api/v2/pokemon/ditto');
        const data = res.data.species;
        return data;
    }
)

const newsSlice = createSlice({
    name:'news',
    initialState,
    reducers: {
        add:(state, action)=> {
            console.log(action.payload);
            state.list = [...state.list, {id:action.payload.id, text:action.payload.text}]
        },
        load(state, action) {
            state.load = !state.load
        }
    },
    extraReducers: {
        [fetchPoke.pending]:(state) => {
            console.log(state.load);
            state.load = !state.load;
        },
        [fetchPoke.fulfilled]:(state, action) => {
            state.load = !state.load;
            state.poke.push({name:action.payload.name, url:action.payload.url});
        }
    }
})
const newsActions = newsSlice.actions;
export {newsActions};

export default newsSlice.reducer;

 

createAsyncThunk

createAsyncThunk에서는 두 개의 인자를 받는데 첫 번째로 액션의 타입, 두 번째로 콜백함수를 받는다. 콜백 함수에서는 axios로 API통신을 하고 data를 받아오는 로직이다. 받아온 data를 return으로 반환해준다.

 

extraReducers

thunk는 promise를 반환하는데, 자바스크립트의 promise의 상태에는 대표적으로는 아래와 같이 3가지가 있다.

pending
fulfilled
reject

 

unwrap ?

unwrap()은 thunk에서 비동기 통신으로 얻은 데이터를 컴포넌트에서 바로 사용할 수 있게 한다.

const temp = async () => {
    const result = await dispatch(fetchPoke()).unwrap();
    console.log(result);
  }

 

🎯출처

https://freestrokes.tistory.com/160

React Redux 알아보기

 

https://velog.io/@sweet_pumpkin/%EB%AC%B4%EC%9E%91%EC%A0%95%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-%EC%B5%9C%EA%B3%A0-%EB%A6%AC%EB%8D%95%EC%8A%A4%EC%95%BC-%EA%B3%A0%EB%A7%99%EB%8B%A4-Redux-Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기

 

https://velog.io/@djaxornwkd12/Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

Redux Toolkit 알아보기