残りの管理者のリストビューを更新する方法

Question

カスタムアクションが正常に実行された後に更新するリストを取得しようとしています。

私は私が持っていた他のアイデアは何とかリストコンポーネントのリフレッシュ動作をトリガすることでしたが、私はそれにアクセスする方法は考えているか、どのように

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イベントまでフックします。

Answer 1

反応ルータ経由で経路を更新する方法はありません。これはknown problemです。 Admin-on-restのListコンポーネントはits own refresh mechanismですが、APIはありません。

私の助言は、余分なものを管理するためのカスタム<List>コンポーネントを使用することです。 refreshアクションを公開する方法が見つかった場合は、自由にaorリポジトリにPRを開くことができます。

Answer 2

間違いなくハックが、回避策は次のようになります。

push('/comments/1') //any path to change the current route 
push('/comments') //the path to refresh, which is now a new route 

Answer 3

私はアクションパネルを経由して、小さなハックでこのタスクを解決してきました。私はそれが正しい解決策ではないと確信しているが、いくつかの状況では、それは助けることができます：私は今、それを使用する時には、上記

class RefreshButton extends FlatButton { 
 
    componentDidMount() { 
 
    if (this.props.refreshInterval) { 
 
     this.interval = setInterval(() => { 
 
     this.props.refresh(new Event('refresh')) 
 
     }, this.props.refreshInterval) 
 
    } 
 
    } 
 

 
    componentWillUnmount() { 
 
    clearInterval(this.interval) 
 
    } 
 
} 
 

 
const StreamActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refresh }) => (
 
    <CardActions> 
 
    {filters && React.cloneElement(filters, { resource, showFilter, displayedFilters, filterValues, context: 'button' }) } 
 
    <RefreshButton primary label="Refresh streams" onClick={refresh} refreshInterval={15000} refresh={refresh} icon={<NavigationRefresh />} /> 
 
    </CardActions> 
 
); 
 

 
export default class StreamsListPage extends Component { 
 
    render() { 
 
    return (
 
     <List 
 
     {...this.props} 
 
     perPage={20} 
 
     actions={<StreamActions />} 
 
     filter={{ active: true }} 
 
     title='Active Streams'> 
 
     <StreamsList /> 
 
     </List> 
 
    ) 
 
    } 
 
}

Answer 4

@Danilaスミルノフの答えは、このメッセージが表示されます。

廃止予定の警告：リストビューを更新するには、カスタムボタンをreduxに接続し、refreshViewアクションをディスパッチすることをお勧めします。

最近更新ボタンをクリックしても機能しませんでした。

ここでは私が私の仕事をしている調整されたバージョンです。

編集：再利用できるようにもう少し修正しました。私はそう頻繁にリフレッシュしたい

---

RefreshListActions.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> 
) 

Answer 5

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

Answer 6

pushはどちらか私のために動作していないようでしたAORのためだけのリダイレクトです。 guleryuzが投稿したものは、私にとって正しい道にあった..ここで私は彼の例を踏まえたものです：

// Import Statement 
import { refreshView as refreshViewAction } from 'admin-on-rest'; 

class RemoveButton extends Component { 
handleClick =() => { 
    const { refreshView, record, showNotification } = this.props; 
    fetch(`http://localhost:33333/api/v1/batch/stage/${record.id}`, { method: 'DELETE' }) 
     .then(() => { 
      showNotification('Removed domain from current stage'); 
      refreshView(); 
     }) 
     .catch((e) => { 
      console.error(e); 
      showNotification('Error: could not find domain'); 
     }); 
} 

render() { 
    return <FlatButton secondary label="Delete" icon={<DeleteIcon />}onClick={this.handleClick} />; 
} 
} 

これらのビットは同様に重要です。

RemoveButton.propTypes = { 
record: PropTypes.object, 
showNotification: PropTypes.func, 
refreshView: PropTypes.func, 
}; 

export default connect(null, { 
showNotification: showNotificationAction, 
refreshView: refreshViewAction, 
})(RemoveButton); 

だから、これが動作する方法は、それがAORのrefreshViewActionプロップ機能としてを使用していますです。これは、基礎となる呼び出しを使用して、私のためにデータグリッドにデータを埋め込みます（GET_LIST）。これはあなたの特定のユースケースには当てはまらないかもしれません。ご質問がある場合はお知らせください。