管理静止 - 如何同步其他组件与查询从列表中过滤？

Question

我想实现这个结构中的页面：
1.卡与总结（收入，用户等）
2.从谷歌地图映射
3.列出元素

内部列表元素有过滤。我坚持如何在过滤列表以表示地图和卡片中的过滤信息时使用过滤器选项。

由于@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> 
    ); 
} 
} 

现在我不能发送所需的数据到Google地图，AnyComponent。 因此，我必须将相同的数据传递给Maps和AnyComponent，或者以某种方式同步在List组件中使用的过滤器。

我该怎么做到这一点？

Answer 1

谢谢！我会知道如何连接新的操作。但是我迷失了如何连接已经使用过的动作来将Filter选项传递给Maps和AnyComponent，所以我可以在那里显示相关信息，它应该在List组件中触发过滤器后更新它的状态。

您不连接到操作。您派遣他们改变redux商店的状态。完全理解redux的概念非常重要，否则您将很难构建这种自定义应用程序。为了确保数据只从上到下流动，组件只能听取商店的变化，而不是操作。

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

1.创建自己的<List>组件

从admin-on-rest文档引用：

联系上，剩下的就是建立与定制的心神。您可以使用自己的组件替换任何带有管理员的组件，例如显示自定义列表布局或给定资源的不同版本形式。

如果你只是想显示在列表视图中的其他元素，你可以换，而不是<Resource>组件<List>组件。 <List>组件接收道具“数据”中的实体以及道具“ID”中的过滤后的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>，并且它将使用新的位置重新呈现。但请记住，这只会显示您的管理页面列表视图中的谷歌地图。

2.将您的组件连接到redux商店。

只有当你想要你的组件，例如谷歌地图，将显示在列表视图之外。这个更加先进，因为您需要更多地了解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 chrome中安装Redux DevTools并打开admin-on-rest demo。然后，您可以打开检测栏，并会出现一个新的标签页，您可以在其中看到redux商店的内容以及在与应用程序进行交互时分派的所有操作。通过这种方式，您将更容易了解admin-on-rest的工作原理。

Answer 2

admin-on-rest导出的List组件与redux连接并从状态接收过滤器。你应该这样做。请参阅List组件的代码，特别是mapStateToProps函数：

admin-on-rest导出的列表组件与redux连接并从状态接收筛选器。你应该这样做。见List组件的代码，espcially的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);