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

Question

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

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

祝你好运!