[Next.js] Next.js Store redux

개인 프로젝트 진행 중에, Infinite scroll을 구현하고 싶어서.. 디자인 열심히 짜고 퍼블리싱 열심히 하고 첫 페이지 로드를 한 다음에

중간에 깨달은게, 상세 페이지 갔다가 뒤로 가기 누르면 이전 데이터가 infinite scroll에 존재 해야 한다는 점 이었다.

 

프론트쪽이 너무 오랜만이라..

Vue쪽에서는 Store를 이용해서 처리했던 기억이 있어서, 찾아보니 Next.js 에서는 redux 라는 라이브러리를 사용하여 stroe를 구성한다는걸 알았다.

 

스토어 구성부터 차근차근 구현 해 보자..!

 

install redux package

bash
npm install @reduxjs/toolkit
npm install react-redux
npm install next-redux-wrapper

설치 이후에, 프로젝트 루트 디렉토리에 store 디렉토리를 추가 하면서 다음과 같은 구조로 파일들을 생성 했다.

 

redux 모듈 작성

store/modules/searchOp.js 쪽에
필요한 통신과, 저장공간들을 만들어 주어야 한당..

 

일단 처음이니.. 참조해 본 포스트들

https://devkkiri.com/post/59cb38dd-f939-462d-9e7f-afcc338b621f

NextJS와 Redux 연동하기 | Kkiri Blog

https://cotak.tistory.com/164

[Next.js] Next.js + redux toolkit 기본 세팅

 

1. 모듈 코드 작성

javascript
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
    operatorList:[],
    searchOption:{
        page:1,
        rarity:[],
        name:'',
        profession:[]
    },
    lastSearchOption: {
        page:1,
        rarity:[],
        name:'',
        profession:[]
    }
}

const operatorSlice = createSlice({
    name: 'operatorList',
    initialState,
    reducers: {
        setPage: (state, action) => {
            state.searchOption.page = action.payload
        },
        setOperatorList: (state, action) => {
            state.operatorList = action.payload
        },
        setSearchOptionProfession: (state, action) => {
            state.searchOption.profession = action.payload
        },
        setSearchOptionName: (state, action) => {
            state.searchOption.name = action.payload
        },
        setSearchOptionRarity: (state, action) => {
            state.searchOption.rarity = action.payload
        },
        setClearSearchOption: (state) => {
            state.searchOption = {
                rarity:[],
                name:'',
                profession:[]
            }
        },
        setLastSearchOption: (state) => {
            state.lastSearchOption = state.searchOption
        }
    }
})

export const {setPage, setOperatorList, setClearSearchOption, setSearchOptionRarity, setSearchOptionProfession, setSearchOptionName, setLastSearchOption} = operatorSlice.actions
export default operatorSlice.reducer

initialState는 기본값 초기화용 변수이고

reducers에 정의하는게 각 데이터를 set하는 action 함수들이다

 

2. 모듈 통합 코드 작성

javascript
import { combineReducers } from "redux";
import { HYDRATE } from "next-redux-wrapper";
import searchOp from './searchOp'

const rootReducer = (state, action) => {
    switch(action.type) {
        case HYDRATE:
            return {
                ...state,
                ...action.payload
            };
    }

    return combineReducers({
        searchOp
    })(state,action)
}

export default rootReducer;

action별로 추가 작업을 시행 할 수 있는 곳..

일단은 패스.. 이쪽은 공부가 더 필요 할 것 같다.

combineReducers로 스토어 모듈을 묶어준다

 

3. 스토어 인덱스 코드 작성

javascript
import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from "next-redux-wrapper";
import reducer from './modules';

const makeStore = (context) => configureStore({ 
    reducer,
});

export const wrapper = createWrapper(makeStore, {

})

4. _app.js 변경

javascript
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import DefaultLayout from '../layout/defaultLayout'
import '@/styles/global.scss'
import Script from 'next/script'
import {wrapper} from '../store'

function App({ Component, pageProps }) {

  return (
    <DefaultLayout>
		...

      <Component {...pageProps} />
    </DefaultLayout>
  )

}

export default wrapper.withRedux(App)

전반적으로 store를 사용할 수 있게 감싼다..

store를 사용할 곳에서 위와 같이 import 해주고 action들을 사용해 주면 된다.

 

javascript
import searchOp, * as operatorActions from '@/store/modules/searchOp'
import { useSelector, useDispatch } from 'react-redux';
import { useCallback } from "react";

javascript
const dispatch = useDispatch()
const searchOpValue = useSelector(({ searchOp }) => searchOp)

// 코드 중략
const searchOpApi = async () => {
        if(checkEndApi) {
            checkEndApi = false
            const params = {...searchOpValue.searchOption}
            await axios.get(`${process.env.NEXT_PUBLIC_API_URL}api/operator/list`, {
                params
            }).then((response) => {
                checkEndApi = true
                if(response.data.last_page === searchOpValue.searchOption.page) {
                    setHasMoer(false)
                } else {
                    setHasMoer(true)
                }
                if(searchOpValue.searchOption.page > 1) {
                    dispatch(operatorActions.setOperatorList([...searchOpValue.operatorList , ...response.data.data]))
                } else {
                    dispatch(operatorActions.setOperatorList(response.data.data))
                }
                dispatch(operatorActions.setLastSearchOption())
            })
        }
        
    }

뭔가 정리하면서 프로그래밍 진행하려고 하는데 react가 처음이기도 하고.. 로직쪽이 복잡해서

개발일지 쪽에 추가적으로 끄적여 봐야겠당..