How to Call selector function from React Component?

Question

This is my Selector , I can able to get data with in the selector but don't know how to call this into view (Component) ,

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;

I have Tried in Component

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

Error

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

Help me Out ...

Crysfel · Accepted Answer · 2017-03-21 16:15:20Z

5

You should call the selector on the connect function like this:

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);

Inside the mapping function, you have access to the state and props for the current component. Keep in mind that all selectors must receive the redux store in order to query the data.

Good luck!

answered Mar 21, 2017 at 16:15

Crysfel

8,1983 gold badges36 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gopinath Kaliappan Over a year ago

Well , thank you for your reply , let me try ... i l upvote if it is ok

vasekhlav · Accepted Answer · 2017-03-21 16:31:12Z

I expect that your Redux store state looks something like this:

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

If it is so, then you have to rewrite your getVisibilityFilter and getTodos selectors.

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

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

Previously you weren't accessing the values from your state, using this edited functions you are. See how I am using dot notation to access the keys of state, which is nothing more than a JavaScript Object.

Also, when u want to use a selector, you should use it in a container component, where u can access the store's state using mapStateToProps function.

The container could look something like this:

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;

Where the TodosList component is your own component that displays the todos. It will receive all visible todos using props (this.props.todos).

In my opinion, selectors aren't called from your view (presentational) components, they are meant to be used in containers, where you can access the application's data.

If you want to learn more about containers and presentational components, take a look at this article, it's worth reading.

this answer is a bit obsolete as container/presentational components are not recommended anymore by the React team...

Collectives™ on Stack Overflow

How to Call selector function from React Component?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related