next-redux-wrapper
Next.js를 사용하고 있다면 Redux를 사용하기 위해 next-redux-wrapper 라이브러리를 사용해야한다.
설치 방법
yarn add 'next-redux-wrapper'
또는
npm -i 'next-redux-wrapper'예시
_app.js
import React from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import withRedux from 'next-redux-wrapper'; // next-redux-wrapper 라이브러리 import
import AppLayout from '../components/AppLayout';
import { Provider } from 'react-redux';
import reducer from '../reducers';
import { createStore, compose, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas';
const sagaMiddleware = createSagaMiddleware();
const makeStore = (initialState, options) => {
// 여기에 store 커스터마이징
const middlewares = [sagaMiddleware]; // 미들웨어는 action과 store 사이에서 동작
// const enhancer = compose(applyMiddleware([...middlewares]));
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
process.env.NODE_ENV !== 'production'
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
})
: compose;
const enhancer = composeEnhancers(
applyMiddleware(...middlewares),
// other store enhancers if any
);
const store = createStore(reducer, initialState, enhancer);
sagaMiddleware.run(rootSaga);
return store;
};
function NodeBird({ Component, pageProps, store }) {
return (
<Provider store={store}>
<Head>
<title>Node Bird</title>
<link
rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.1/antd.css'
/>
</Head>
<AppLayout>
<Component {...pageProps} /> {/* Component JSX 형식으로 작성할 것 */}
{/* Next에서 pages 폴더 내의 Components를 자동적으로 props로 넣어줌 */}
</AppLayout>
</Provider>
);
}
NodeBird.propTypes = {
Component: PropTypes.elementType,
props: PropTypes.object,
};
export default withRedux(makeStore)(NodeBird); // HoC로 redux-next-wrapper, Redux, Component를 연결
Redux Saga와 같이 사용
// Before this, import what you need and create a root saga as usual
const makeStore = (initialState, options) => {
// 1: Create the middleware
const sagaMiddleware = createSagaMiddleware();
// Before we returned the created store without assigning it to a variable:
// return createStore(reducer, initialState);
// 2: Add an extra parameter for applying middleware:
const store = createStore(reducer, initialState, applyMiddleware(sagaMiddleware));
// 3: Run your sagas:
sagaMiddleware.run(rootSaga);
// 4: now return the store:
return store
};
JavaScript, Node.js 그리고 React를 배우는