如何从 React 组件中调用选择器函数？

Question

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

import {todos} from '../reducers/todos';
import { createSelector } from 'reselect'
var visibilityFilter='SHOW_ALL';

var getVisibilityFilter = (state) =>  visibilityFilter;
var getTodos = (state) => todos;

export const getVisibleTodos = createSelector(
  [ getVisibilityFilter, getTodos ],
  (visibilityFilter, todos) => {


    switch (visibilityFilter) {
      case 'SHOW_ALL':
        return todos
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed)
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed)
    }


  }  
)

export default getVisibleTodos;

我试过组件

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

错误

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. Blockquote

帮帮我...

Answer 1

您应该像这样在 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);

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

祝你好运！

Answer 2

我希望您的 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 组件是您自己的显示待办事项的组件。它将使用 props (this.props.todos).

接收所有可见的待办事项

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

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

如何从 React 组件中调用选择器函数？

How to Call selector function from React Component?

reactjs

redux

react-redux