Javascript Redux – how to get an element from store by id

For the past weeks I’ve been trying to learn React and Redux.
Now I have met a problem thay I haven’t found a right answer to.

Suppose I have a page in React that gets props from the link.

const id = this.props.params.id;

Now on this page, I’d like to display an object from STORE with this ID.

 const initialState = [
      {
        title: 'Goal',
        author: 'admin',
        id: 0
      },
      {
        title: 'Goal vol2',
        author: 'admin',
        id: 1
      }
    ]

My question is:
should the function to query the the object from the STORE be in the page file, before the render method, or should I use action creators and include the function in reducers.
I’ve noticed that the reduceres seem to contain only actions that have an impoact on store, but mine just queries the store.

Thank you in advance.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You could use the mapStateToProps function to query the store when you connect the component to redux:

import React from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

const Foo = ({ item }) => <div>{JSON.stringify(item)}</div>;

const mapStateToProps = (state, ownProps) => ({
  item: _.find(state, 'id', ownProps.params.id)
});

export default connect(mapStateToProps)(Foo);

(This example uses lodash – _)

The mapStateToProps function takes in the whole redux state and your component’s props, and from that you can decide what to send as props to your component. So given all of our items, look for the one with the id matching our URL.

https://github.com/rackt/react-redux/blob/master/docs/api.md#arguments

Solution 2

import _ from 'lodash'; const mapStateToProps = (state, ownProps) => ({ item: _.find(state.data, (e) => e.product_id == ownProps.match.params.productID) });

Here product_id is a label present in the API, and productID is the parameter I gave in the react-router.

ATTENTION: do not forget the match keyword

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply