在react-admin中访问redux存储

时间:2019-02-07 09:34:20

标签: javascript redux react-redux react-admin

我的问题与react-admin回购有关。

我想在组件范围之外调度一个动作,I've read that我需要访问实际的redux存储本身,并直接在内部进行调度,

所以我知道Admin组件有一个initialState道具,但是它仅接受默认状态对象,而不接受存储。因此,我无法建立商店并将其传递。

我的问题是:

  • 如何访问Admin组件的redux存储?
  • 当使用Admin作为主要应用程序组件时,如何在组件外部调度动作?

我当前的应用程序条目如下:

<AppLayoutDirection>
    <Admin
      title="My App"
      locale="en"
      dataProvider={dataProvider}
      authProvider={authProvider}
      i18nProvider={i18nProvider}
      theme={themeProvider}
      customSagas={customSagas}
      appLayout={AppLayout}
    >
      {DynamicResource}
    </Admin>
  </AppLayoutDirection>

2 个答案:

答案 0 :(得分:2)

当您说需要在组件范围之外分派一个动作时,我想它是对过去分派的另一个动作的反应。

在这种情况下,这就是react-admin所说的副作用。 React-admin使用redux-saga处理副作用。这是创建自定义传奇的方法:

// in src/bitcoinSaga.js
import { put, takeEvery } from 'redux-saga/effects';
import { showNotification } from 'react-admin';

export default function* bitcoinSaga() {
    yield takeEvery('BITCOIN_RATE_RECEIVED', function* () {
        yield put(showNotification('Bitcoin rate updated'));
    })
}

按如下方式在<Admin>组件中注册该传奇:

// in src/App.js
import React from 'react';
import { Admin } from 'react-admin';

import bitcoinSaga from './bitcoinSaga';

const App = () => (
    <Admin customSagas={[ bitcoinSaga ]} dataProvider={simpleRestProvider('http://path.to.my.api')}>
        ...
    </Admin>
);

export default App;

react-admin文档在the <Admin> chapter中对此进行了记录。

答案 1 :(得分:0)

如果计算不异步,您也可以简单地使用自定义化简器

    // in src/App.js

    import React from 'react';
    import { Admin } from 'react-admin';

    import reducers from './reducers';

    const App = () => (
        <Admin customReducers={customReducers} dataProvider={simpleRestProvider('http://path.to.my.api')}>
            ...
        </Admin>
    );

    export default App;