在 react-admin 中获得对 redux 存储的访问权限答案

【问题标题】：In react-admin get access to redux store在 react-admin 中获得对 redux 存储的访问权限
【发布时间】：2019-07-01 09:14:54
【问题描述】：

我的问题与react-admin repo 有关。

我想在组件范围之外调度一个动作，为了做到这一点，I've read that 我需要访问实际的 redux 存储本身，并直接调度，

所以我知道Admin 组件有一个initialState 属性，但它只接受默认状态对象，而不接受商店。所以我不能做一个 store 传进去。

我的问题是：

如何访问 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>

【问题讨论】：

标签： javascript redux react-redux react-admin

【解决方案1】：

如果计算不是异步的，您也可以简单地使用自定义减速器

    // 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;

【讨论】：

【解决方案2】：

当你说你需要在组件范围之外调度一个动作时，我想它是对过去调度的另一个动作的反应。

在这种情况下，这就是 react-admin 所说的副作用。 React-admin 使用 redux-saga 处理副作用。以下是创建自定义 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> 组件中注册这个saga，如下所示：

// 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。

【讨论】：