javascript - Admin-on-rest - 如何将其他组件与从列表中过滤的查询同步？

Question

我想在页面中实现这个结构:
1.带有摘要的卡片(收入、用户等)
2. 谷歌地图 map
3.列表元素

列表元素内部有过滤。我在过滤列表时困惑于如何使用过滤选项来表示 map 和卡片中的过滤信息。

正如 @trixn 推荐的那样，我使用这个结构:

// app.js

<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
    <Resource name="posts" list={MyCustomPostList} /* other views */ />
</Admin>


// MyCustomPostList.js
class MyCustomPostList extends React.Component {
render() {
    const {myOwnProp, ...otherProps} = this.props;

    return (
        <div>
            // render your own components here
            <AnyComponent myOwnProp={myOwnProp} />
            <AGoogleMapsComponent />

            // render the normal <List> component
            <List {...otherProps}>
                <Datagrid>
                    <TextField source="id" />
                    <TextField source="title" />
                    <TextField source="body" />
                </Datagrid>
             </List>
        </div>
    );
}
}

现在我无法将所需的数据发送到 map 和 AnyComponent。因此，我要么必须将相同的数据传递给 Maps 和 AnyComponent，要么以某种方式同步 List 组件中使用的过滤器。

我该如何实现这个目标？

Answer 1

Thank you! I would know how to connect new actions. But I am lost how to connect to already used actions to pass Filter options to Maps and AnyComponent, so I could show relevant information there, which should update its state after Filters are being triggered in List component.

您未连接到操作。您 dispatch 它们来改变 redux 存储的状态。完全理解 redux 的概念很重要，否则你将很难构建这种自定义应用程序。为了确保数据仅从上到下流动，组件只能监听存储的更改，而不能监听操作。

所以基本上你有两个选择:

<强>1。创建您自己的<List>组件

引自admin-on-rest文档:

Admin-on-rest was build with customization in mind. You can replace any admin-on-rest component with a component of your own, for instance to display a custom list layout, or a different edition form for a given resource.

如果您只想在 ListView 中显示其他元素，您可以将 <List> 括起来。组件而不是 <Resource>成分。 <List>组件接收 prop“data”中的实体和 prop“ids”中过滤后的 id。您可以使用它在您自己的组件中显示它。例如。如果您想管理位置列表并在列表组件内显示谷歌地图:

import React from 'react';
import { List } from 'admin-on-rest';


const LocationsList = props => (
    // render your own components
    <MyGoogleMapsComponent  data={this.props.data} ids={this.props.ids}>

    // render the admin-on-rest <List> component
    <List {...props}>
        // render the DataGrid
    </List>
);

然后您可以将自定义列表传递给<Resource>组件:

<Admin>
    <Resource name="locations" list={LocationList} />
</Admin>

当您过滤列表中的位置时，更新后的查询将传递到您的 <LocationList>并且它将使用新位置重新渲染。但请记住，这只会在管理页面的 ListView 中显示您的谷歌地图。

<强>2。将您的组件连接到 redux 存储。

仅当您需要组件时才执行此操作，例如谷歌地图，显示在 ListView 之外。这个要高级得多，因为您需要更多地了解 admin-on-rest 的内部结构。 。您必须将自定义组件连接到 redux 存储。您可以使用 connect() 来做到这一点函数来自 react-redux封装:

// in MyGoogleMapsComponent.js
import React from 'react';
import { connect } from 'react-redux';

const LocationMap = ({locations}) => (
    //render something based on the props
);

const mapStateToProps = (state, props) => {
    // state.admin contains all the registered resources with their name as a key
    const locationsResource = state.admin.locations;

    // every resource has a "data" object with all entities mapped by id
    const allLocations = locationsResource.data;        

    // every resource has a "list" object that has an array of ids of the currently filtered entities
    const filteredIDs = locationsResource.list.ids;

    return {
        locations: filteredIDs.map(id => allLocations[id]),
    };
};

// connect your component to the store
export default connect(mapStateToProps)(LocationsList)

mapStateToProps是一个函数，它获取存储中的当前状态和组件的 Prop ，并返回一个包含要传递给组件的其他 Prop 的对象。

此方法还使用 admin-on-rest 实现的内部结构成分。您需要使用的一些 props 不是 api 的一部分，在最坏的情况下可能会突然改变，在这种情况下，如果您更新到 admin-on-rest 的新版本，您的应用程序可能不再工作。 。因此请记住，当发生重大更改时，您可能需要更新您的实现。

如果您只想访问过滤器本身，它们存储在 yourResourceName.list.params.filter 下的每个资源中以过滤器的名称作为键，以值作为值...

提示:如果您想了解 admin-on-rest 存储中的数据是如何存储的应用程序存储在现实生活中的示例中，安装 Redux DevTools对于 google chrome 并打开 admin-on-rest demo 。然后，您可以打开检查栏，然后会出现一个新选项卡 redux，您可以在其中查看 redux 存储的内容以及与应用程序交互时调度的所有操作。这样你会更容易理解如何admin-on-rest有效。