Question

我有一个定制的reducer和一个连接的组件来更改其状态。现在，我想将此状态用作List元素的永久过滤器。我知道List元素已连接到redux状态，所以我希望能够通过List组件的props访问它，但找不到方法。

Answer 1

已连接List组件，但没有连接。

import { connect } from "react-redux";

const MyList = ({ is_published, ...props }) => (
    <List {...props} filter={{ is_published }}>

    </List>
);

const mapStateToProps = state => ({
    is_published: state.myCustomReducer.is_published,
});

export default connect(mapStateToProps, undefined)(MyList);

编辑：

只是发现当此属性更改时我们不更新数据。这是一个错误，您可以提出一个问题。

同时，这是一种解决方法：创建一个custom saga来监听您在定制化reducer上使用的任何操作（在我的示例中，我将其称为SET_IS_PUBLISHED）。这个自定义的传奇应该put changeListParams的{{1}}动作创建者和您的过滤器。

它可能看起来像这样（未经测试）：

react-admin

Answer 2

只是为了将其带入 2021 年，您可以使用 useSelector redux hook 来获取您的自定义状态：

import { useSelector } from 'react-redux';
const MyCustomThing = (props) => {
  const is_published = useSelector(state => state.customState.is_published);
}

为了完整起见，react-admin 为其 <Admin> 组件提供了 customReducers 属性，以便您可以使用自定义值扩展 redux 状态：

const customStateReducer = (customState = { is_published: false }, { type, payload }) => {
  if (type === 'IS_PUBLISHED') customState.is_published = payload.is_published;
  return customState;
}

<Admin customReducers={{ customState: customStateReducer }} ...>
etc

如何在<list>中使用自定义化简器的状态作为永久过滤器？

2 个答案: