如何从 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>

错误

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

帮帮我 ...

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 存储才能查询数据。

祝你好运！