我正在尝试在成功执行自定义操作后获取要刷新的列表。
我在休息教程中使用了管理员的传奇
function * actionApproveSuccess () {
yield put(showNotification('Executed'))
yield put(push('/comments'))
// does not refresh, because the route does not change
// react-redux-router also has no refresh() method, like react-router has...
}
我的另一个想法是以某种方式触发列表组件的刷新操作，但我不知道如何访问它或如何将它连接到 ACTION_SUCCESS 事件。
当我现在使用它时，@Danila Smirnov 上面的回答显示了这条消息：
弃用警告：刷新列表视图的首选方法是将自定义按钮与 redux 连接并分派 refreshView 操作。
现在单击刷新按钮本身也不起作用。
这是我在我的工作中使用的调整版本。
编辑：对其进行了更多修改以使其可重用。
刷新列表操作.js
import React, { Component } from 'react'
import FlatButton from 'material-ui/FlatButton'
import { CardActions } from 'material-ui/Card'
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh'
import { connect } from 'react-redux'
import { REFRESH_VIEW } from 'admin-on-rest/src/actions/uiActions'
import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions'
class MyRefresh extends Component {
componentDidMount() {
const { refreshInterval, refreshView } = this.props
if (refreshInterval) {
this.interval = setInterval(() => {
refreshView()
}, refreshInterval)
}
}
componentWillUnmount() {
clearInterval(this.interval)
}
render() {
const { label, refreshView, icon } = this.props;
return (
<FlatButton
primary
label={label}
onClick={refreshView}
icon={icon}
/>
);
}
}
const RefreshButton = connect(null, { refreshView: refreshViewAction })(MyRefresh)
const RefreshListActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refreshInterval }) => (
<CardActions>
{filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) }
<RefreshButton primary label="Refresh" refreshInterval={refreshInterval} icon={<NavigationRefresh />} />
</CardActions>
);
export default RefreshListActions
在我想经常刷新的列表中：
import RefreshListActions from './RefreshListActions'
export default (props) => (
<List {...props}
actions={<RefreshListActions refreshInterval="10000" />}
>
<Datagrid>
...
</Datagrid>
</List>
)
绝对是hacky，但解决方法可能是：
push('/comments/1') //any path to change the current route
push('/comments') //the path to refresh, which is now a new route
通过 redux 使用 refreshView 操作效果很好。
看例子....
import { refreshView as refreshViewAction } from 'admin-on-rest';
import { connect } from 'react-redux';
class MyReactComponent extends Component {
//... etc etc standard react stuff...
doSomething() {
// etc etc do smt then trigger refreshView like below
this.props.refreshView();
}
render() {
return <div>etc etc your stuff</div>
}
}
export default connect(undefined, { refreshView: refreshViewAction })(
MyReactComponent
);