Question

这是我的选择器，我能够在选择器中获取数据，但不知道如何将其调用到视图（组件），

<button onClick={()=>props.getVisibleTodos(props.SHOW_ALL , props.experimentData.lights)}> SHOW_COMPLETED</button>

我在组件中尝试了

.form-section{
    display:inline-block;
}

错误

未捕获错误：操作必须是普通对象。使用自定义中间件用于异步操作。块引用

帮帮我......

Answer 1

我希望你的Redux商店状态看起来像这样：

{
  todos: [
    {
      id: 1,
      text: 'Buy milk',
      completed: false
    },
    ...
  ],
  visibilityFilter: 'SHOW_ALL'
}

如果是这样，那么您必须重写getVisibilityFilter和getTodos选择器。

const getVisibilityFilter = (state) => state.visibilityFilter;

const getTodos = (state) => state.todos;

以前，您无法使用此编辑的功能访问您所在州的值。看看我如何使用点符号来访问状态键，这只不过是一个JavaScript对象。

此外，当您想要使用选择器时，您应该在容器组件中使用它，您可以使用mapStateToProps函数访问商店的状态。

容器看起来像这样：

import React from 'react';
import { connect } from 'react-redux';
import { getVisibleTodos } from './selectors.js';
import TodosList from './TodosList.jsx';

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state)
  }
}

const VisibleTodosList = connect(
  mapStateToProps
)(TodosList);

export default VisibleTodosList;

TodosList组件是您自己的组件，显示待办事项。它将使用道具（this.props.todos）接收所有可见的待办事项。

在我看来，选择器不会从您的视图（表示）组件中调用，它们应该用在容器中，您可以在其中访问应用程序的数据。

如果您想了解有关容器和演示组件的更多信息，请查看此article，这值得一读。

Answer 2

您应该在connect函数上调用选择器，如下所示：

import { connect } from 'react-redux';
import getVisibleTodos from 'your/selector/file';

function YourComponent({ visibleTodos }) {
  // You can access visibleTodos inside your component
  // because now it's on the props

  return (
    <div>
      //...
    </div>
  );
}

const mapping = (state, props) => ({
  visibleTodos: getVisibleTodos(state, props),
});

connect(mapping)(YourComponent);

在映射函数中，您可以访问当前组件的state和props。请记住，所有选择器都必须接收redux存储才能查询数据。

祝你好运！

如何从React组件调用选择器功能？

2 个答案: