React-admin의 Redux, Saga를 이용한 Pagination(Route쓸때)

https://marmelab.com/react-admin/

React-admin - Including the Admin in Another App

 

해당 API는 React의 App.js 내에서 파일을 만들고, 추가 기능들이 들어간 파일들을 import하는 형식으로 쓰는 것이다.

하지만, 이미 어느 정도 페이지가 만들어진 우리 프로젝트의 상황에서는,

기존에 만들었던 Routes들과 충돌이 나기 때문에 tutorial처럼 쓸 수 없었다.

https://github.com/marmelab/react-admin/issues/4975

Uncaught Error: Missing history prop. · Issue #4975 · marmelab/react-admin

 

이런 문제가 계속 발생해 방법을 알아보던 중,

이미 페이지 안에서 Redux와 Redux Saga를 이용해서 Admin Page를 불러올 수 있는 메뉴얼이 있다는 것을 알게 되었다.

https://marmelab.com/react-admin/CustomApp.html

React-admin - Including the Admin in Another App

이를 활용해 CreateAdminStore를 만들고, 

App역할을 하는 UserPageApp을 만들어 Routes에 추가하니깐 잘 작동했다.

// createAdminStore.js
import { adminReducer, adminSaga, USER_LOGOUT } from "react-admin";
import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import { routerMiddleware, connectRouter } from "connected-react-router";
import createSagaMiddleware from "redux-saga";
import { all, fork } from "redux-saga/effects";

export default ({ authProvider, dataProvider, history }) => {
  const reducer = combineReducers({
    admin: adminReducer,
    router: connectRouter(history),
    // 내 Reducer 이름 추가하면 됨
  });
  const resettableAppReducer = (state, action) =>
    reducer(action.type !== USER_LOGOUT ? state : undefined, action);

  const saga = function* rootSaga() { 
    yield all(
      [
        adminSaga(dataProvider, authProvider),
        //내 saga 여기에 추가
      ].map(fork)
    );
  };
  const sagaMiddleware = createSagaMiddleware();

  const composeEnhancers =
    (process.env.NODE_ENV === "development" &&
      typeof window !== "undefined" &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        trace: true,
        traceLimit: 25,
      })) ||
    compose;

  const store = createStore(
    resettableAppReducer,
    // 내 initial state 여기에 추가
    composeEnhancers(
      applyMiddleware(
        sagaMiddleware,
        routerMiddleware(history)
        //내 Middleware 여기에 추가
      )
      //내 enhancer 여기에 추가
    )
  );
  sagaMiddleware.run(saga);
  return store;
}; //default function

 

* 다중언어 설정인 i18n은 일단 주석 처리했다.

// UserPageApp.js
import * as React from "react";
import { Provider } from "react-redux";
import { createHashHistory } from "history";
import { Admin } from "react-admin";
import restProvider from "ra-data-simple-rest";

import createAdminStore from "./createAdminStore";

const dataProvider = restProvider("https://localhost:3000");
const authProvider = () => Promise.resolve();
/* const i18nProvider = polyglotI18nProvider((locale) => {
  if (locale !== "en") {
    return messages[locale];
  }
  return defaultMessages;
}); */

const history = createHashHistory();

const UserPageApp = () => (
  <Provider
    store={createAdminStore({
      authProvider,
      dataProvider,
      history,
    })}
  >
    <Admin
      authProvider={authProvider}
      dataProvider={dataProvider}
      history={history}
      title="My Admin"
    ></Admin>
  </Provider>
);

export default UserPageApp;

 

이제 시작...!

이렇게 기본 설정을 만든 후 Tutorial을 시작하면 된다.