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

Question

我想在页面中实现这个结构：

1. 附有摘要的卡片(收入、用户等)
2. 来自谷歌地图的地图
3. 列表元素

在List元素中存在过滤。当筛选列表以表示地图和卡片中的过滤信息时，我被困住了如何用户筛选选项。

正如@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>
    );
}
}

现在，我无法向地图和AnyComponent发送所需的数据。因此，我要么将相同的数据传递给Maps和AnyComponent，要么以某种方式对列表组件中使用的过滤器进行同步。

我该如何做到这一点？

Answer 1

谢谢!我会知道如何把新的行动联系起来。但是，我不知道如何连接到已经使用的操作，以便将筛选器选项传递给Maps和AnyComponent，以便在列表组件中触发筛选器之后显示相关信息，这些信息应该更新其状态。

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

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

创建您自己的<List> 组件

引用自admin-on-rest文档：

rest管理是在考虑定制的情况下构建的。您可以用自己的组件替换任何admin组件，例如显示自定义列表布局，或者为给定资源显示不同的版本表单。

如果只想在列表视图中显示附加元素，则可以包装<List>组件而不是<Resource>组件。<List>组件接收道具“数据”中的实体，以及支柱" ids“中的过滤ids。您可以使用它在您自己的组件中显示它。例如，如果您想管理位置列表并在列表组件中显示google地图：

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>，并且它将与新的位置一起重新呈现。但请记住，这将只显示您的谷歌地图在您的管理页面的列表视图。

2.将组件连接到redux .

只有当您希望将组件(例如google地图)显示在列表视图之外时，才可以这样做。这个版本要高级得多，因为您需要更多地了解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是一个函数，它接受存储中的当前状态和组件的道具，并返回一个对象，其中包含要传递给组件的附加道具。

此外，这种方法还使用了admin-on-rest组件的内部实现。你需要使用的一些道具不是api的一部分，在最坏的情况下可能会突然改变，如果你更新到一个新版本的admin-on-rest，你的应用程序可能就不再工作了。因此，请记住，当发生破坏更改时，您可能需要更新实现。

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

提示:如果您想看，在现实生活中存储的admin-on-rest应用程序列表存储的数据是如何安装google的Redux DevTools并打开管理员在rest演示的。然后，您可以打开检查栏，然后会有一个新的选项卡redux，在这里您可以看到redux存储的内容和所有在与应用程序交互时被分派的操作。这样，您将更容易理解admin-on-rest是如何工作的。

Answer 2

由admin rest导出的列表组件与redux连接，并从状态接收过滤器。你也该这么做。请参见List组件的代码，尤其是mapStateToProps函数：

由admin rest导出的列表组件与redux连接，并从状态接收过滤器。你也该这么做。请参见List组件的代码，尤其是mapStateToProps函数：

类似于：

// MyCustomPostList.js
import { connect } from 'react-redux';
import { parse } from 'query-string';

class MyCustomPostList extends React.Component {
    render() {
        const { myOwnProp, query: { filter }, ...otherProps } = this.props;

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

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

const getLocationSearch = props => props.location.search;
const getQuery = createSelector(
    getLocationSearch,
    (locationSearch) => {
        const query = parse(locationSearch);
        if (query.filter && typeof query.filter === 'string') {
            query.filter = JSON.parse(query.filter);
        }
        return query;
    },
);

function mapStateToProps(state, props) {
    return {
        query: getQuery(props),
    };
}

export default connect(mapStateToProps)(MyCustomPostList);