React-Redux를 사용하여 NextJS에 로딩 애니메이션 추가

내 프로젝트 중 하나에서 NextJS를 사용하여 서버 측 렌더링을 구현한 후 페이지 간을 탐색할 때 내 프로젝트가 느려지는 것을 발견했습니다. 사용자가 이것을 사용한다면 웹 앱이 작동하는지 궁금해 할 것입니다. 이를 염두에 두고 페이지 사이를 이동할 때 로딩 애니메이션을 구현하기로 결정했습니다.

먼저 원사를 사용하여 프로젝트에 redux, react-redux 및 material-ui를 추가해야 했습니다.

yarn add redux
yarn add react-redux
yarn add @material-ui/core

액션과 리듀서

그 후 파일 구조에 액션과 리듀서라는 두 개의 폴더를 추가해야 했습니다.

행위

action 폴더에 action을 반환하는 함수가 포함된 index.js 파일을 추가했습니다. 이렇게 하면 프로젝트가 로드 중임을 알리기 위해 부울 스위치를 디스패치하는 데 사용할 함수의 이름을 지정할 수 있었습니다.

export function setLoadingCondition() {
    return {
        type: "setLoadingCondition"
    }
}

감속기

그런 다음 reducers 폴더에 loading.js와 index.js라는 두 파일을 추가했습니다.

loading.js에서 나는 초기 상태(거짓)가 있는 리듀서(loadingReducer라고 이름 지음)를 추가해야 했고, 이전에 action 폴더의 index.js 파일에 작성한 setLoadingCondition 유형을 인식했는지 확인해야 했습니다. 그 기능이 발송된 후. 그것이 발견되면 초기 상태의 반대(즉, true)를 반환하도록 했습니다. 해당 유형이 디스패치되지 않은 경우 초기 상태를 반환했는지 확인했습니다. 결국 loading.js 파일은 다음과 같습니다.

const loadingReducer = (state = false, action) => {
    switch(action.type){
        case "setLoadingCondition":
            return !state


        default: return state
    }
}


export default loadingReducer

index.js 파일에서 먼저 loading.js에서 작성한 loadingReducer와 redux에서 combineReducers라는 함수를 가져와야 했습니다. 그런 다음 combineReducers 함수를 사용하여 리듀서를 선택할 때 loadingReducer가 단순히 로드하는 것으로 인식될 수 있도록 합니다. 그것은 나중에 사용될 allReducers라는 const로 끝납니다. 결국 reducers 폴더의 index.js 파일은 다음과 같았습니다.

import loadingReducer from './loading'
import {combineReducers} from 'redux'


const allReducers = combineReducers({
    loading: loadingReducer
})


export default allReducers

액션과 리듀서를 프로젝트에 연결하기

_app.js

_app.js 파일에서 NextJS가 내 redux와 react-redux가 사용되고 있다는 사실을 인식하는지 확인해야 했습니다. 먼저 react-redux에서 Provider 태그를 가져와야 했습니다. 그런 다음 Provider 태그 안에 Component 태그를 넣었습니다. Provider 태그를 Component 태그로 감싼 상태에서 Provider가 내가 만든 리듀서를 알고 있는지 확인해야 했습니다. 이를 염두에 두고 redux에서 createStore와 이전에 만든 allReducer를 가져와야 했습니다. store라는 const에서 allReducer를 활용하기 위해 createStore 함수를 사용했습니다. 그런 다음 상점은 상점이라고도 하는 속성의 공급자 태그에 있습니다. 결국 _app.js는 다음과 같이 생겼습니다.

import {createStore} from 'redux'
import allReducer from '../reducers'
import {Provider} from 'react-redux'
export default function MyApp({ Component, pageProps }) {


    const store = createStore(allReducer);

    return <Provider store={store}><Component {...pageProps} /></Provider>


}

리듀서 및 로딩 애니메이션 구현

다른 페이지 사이를 탐색할 수 있게 해주는 구성 요소에서 useDispatch라는 react-redux의 후크를 가져와야 했고 이전에 actions 폴더의 index.js 파일에서 만든 setLoadingCondition을 가져와야 했습니다. 그런 다음 단순화를 위해 useDispatch 후크를 사용하는 dispatch라는 const를 만들었습니다. Link 태그 내의 요소에 onClick 이벤트를 추가하여 프로젝트가 로드 중임을 알 수 있도록 setLoadingCondition 함수를 전달할 수 있습니다. 페이지에서 useSelector라는 react-redux의 후크와 @material-ui/core의 LinearProgress 태그를 가져왔습니다. 나는 loading을 호출한 const에서 useSelector 후크를 사용하여 단순화를 위해 loading이라고 알려진 loadingReducer를 선택했습니다. DOM에서 페이지가 로드되는지 확인하는 기능을 만들었습니다. 그렇다면 로딩이 참일 것입니다. 로딩이 참이면 LinearProgress 태그 주위에 div 태그를 감쌌습니다. 데이터 양이 늘어나기 때문에 스크롤하면서 LinearProgress를 볼 수 있도록 해야 했습니다. 이를 위해 css 파일에서 사용자 정의할 수 있도록 div 태그에 className을 추가했습니다. 내 파일에 추가한 내용은 다음과 같습니다.

요소:

// import statements

import {useDispatch} from 'react-redux'
import {setLoadingCondition} from '../../actions'

//const

const dispatch = useDispatch()

//DOM

return (
  <Link href={`/project?title=${props.id}`}><h1 onClick={() => dispatch(setLoadingCondition())} className={styles.displaytitle}><strong>{props.project}</strong></h1></Link>
)

페이지:

// import statements

import {useSelector} from 'react-redux'
import {LinearProgress} from '@material-ui/core'

//const

const loading = useSelector(state => state.loading)

//DOM

return (
{loading && <div className="loading"><LinearProgress /></div>}
)

CSS 파일:

.loading {
  position: fixed;
  top: 0;
  width: -webkit-fill-available;
  width: -moz-available;
  z-index: 3;
}

Redux 덕분에 내 프로젝트에는 이제 로딩 애니메이션이 있습니다.



Here's the final result