[英]In react-admin get access to redux store
My question is related to react-admin repo.我的问题与react-admin repo 有关。
I want to dispatch an action, outside of scope of a component, in order to do that, I've read that I need to get access to the actual redux store itself, and dispatch on in directly,我想在组件范围之外分派一个动作,为了做到这一点,我读到我需要访问实际的 redux 存储本身,并直接分派,
so I know that the Admin
component has an initialState
prop, but it only accepts default state object, not the store.所以我知道
Admin
组件有一个initialState
道具,但它只接受默认状态对象,而不是商店。 So I can't make a store and pass it in.所以我不能创建一个商店并传递它。
My question is:我的问题是:
Admin
component?Admin
组件的 redux 存储? my current app entry looks like this:我当前的应用程序条目如下所示:
<AppLayoutDirection>
<Admin
title="My App"
locale="en"
dataProvider={dataProvider}
authProvider={authProvider}
i18nProvider={i18nProvider}
theme={themeProvider}
customSagas={customSagas}
appLayout={AppLayout}
>
{DynamicResource}
</Admin>
</AppLayoutDirection>
When you say that you need to dispatch an action outside the scope of a component, I suppose that it's in reaction to another action that was dispatched in the past.当你说你需要在组件范围之外调度一个动作时,我想它是对过去调度的另一个动作的反应。
In that case, that's what react-admin calls a side effect .在这种情况下,这就是 react-admin 所说的副作用。 React-admin handles side effects using redux-saga .
React-admin 使用redux-saga处理副作用。 Here is how to create a custom 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'));
})
}
Register this saga in the <Admin>
component as follows:在
<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;
This is documented in the react-admin documentation, in the <Admin>
chapter .这在 react-admin 文档中的
<Admin>
章节中有所记录。
You could also simply use custom reducers if the computation is no async如果计算不是异步的,您也可以简单地使用自定义减速器
// 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.