리액트 - Redux Toolkit을 써보자

1. redux toolkit 설치하기

$ npm install @reduxjs/toolkit react-redux

---

2. redux toolkit 기본 세팅: Provider로 감싸기

index.js에서 <Provider store={store}></Provider> 로 감싸면 끝난다.

        Provider로 감싸면 state 냉장고 완성

        <Provider store={store}>

            <BrowserRouter basename={process.env.PUBLIC_URL}>

                <App />

            </BrowserRouter>

        </Provider>

 

여기서 전달할 store props는 아래(3)의 store.js 파일이다.

---

3. redux toolkit 기본 세팅: 스테이트 만들기

store.js 파일을 만들어 아래와 같이 생성하게 된다.

 

import { configureStore, createSlice } from "@reduxjs/toolkit";

 

1. 아래와 같이 생성한다

const 변수명 = createSlice({

    name: "state를 알기 쉬운 아무이름",

    initialState: "값",

});

ex) 변수 명은 알기 쉽게

const user = createSlice({

    name: "user",

    initialState: "young",

});

2. 아래와 같이 생성한 state를 reducer에 저장하면 사용할 수 있다.

export default configureStore({

    reducer: {

ex) 아래 예시처럼

        변수명: 변수명.reducer,

        user: user.reducer,

        product: product.reducer,

    },

});

---

4. 이제 state 가져와야죠

 

const Cart = () => {

    useSelector의 인자에는 reducer에 저장한 변수를 넣게 되면 해당 state만 가져온다.

    const productData = useSelector((state) => state.product);

    console.log(productData);

 

---

5. 컴포넌트 간에 공유가 필요없다면 그냥 useState()를 쓰는게 좋다.

---

6. redux state 변경하는 방법

1. 아래와 같이 reducers 안에 함수를 만들어 줍니다.

    reducers: {

        매개변수 state는 initialState의 값이 됩니다.

        state변경함수이름(state) {

            return state + 1;

        },

    },

});

 

2. 함수를 export합니다. user.actions에 reducers의 함수들이 저장됩니다.

export let { state변경함수이름 } = user.actions;

 

3. 함수를 사용할 곳에서 import 합니다.

import { state변경함수이름 } from "./store";

 

    useDispatch()는 store.js에서 가져온 함수를 쓸 수 있도록 합니다. 6-4번같이 쓰면 됩니다.

    const dispatch = useDispatch();

 

4. import한 함수를, dispatch()의 인자로 전달합니다.

                                <button

                                    onClick={() => {

                                        dispatch(state변경함수이름());

                                    }}

                                >

                                </button>

---

7. object/array 타입의 state 변경하는 방법

const userObject = createSlice({

    name: "user",

    initialState: { name: "gentry", size: 999 },

    reducers: {

        increaseUserAge(state) {

            Immer.js 라이브러리 덕분에 객체를 다룰 때처럼 직접 변경하면 된다.

            state.age++

        },

    },

});

---

8. 두번째 매개변수로 함수에서 입력된 값을 전달받는다 

const userObject = createSlice({

    name: "user",

    initialState: { name: "gentry", age: 999 },

    reducers: {

        increaseUserAge(state, number) {

            두번째 매개변수를 넣을 위치를 정하고 .payload를 붙여주면 된다.

            state.age += number.payload;

        },

    },

});

---

9. 원하는 데이터를 id로 찾을때는 Array.findIndex()

배열을 순회하며 조건에 일치하는 데이터의 index를 반환한다.

        increaseAmount(state, productId) {

            const productIndex = state.findIndex((el) => el.id === productId.payload);

 

        },

---