How to pass parameter to selector?

[jk2K]

I want to get channel with channelId prop

My code

const mapStateToProps = (state, ownProps) => {
  return {
    channelId: ownProps.params.channelId,
    channel: selectChannel()
  }
};

selectors

const selectHome = () => (state) => state.get('home');

const selectChannels = () => createSelector(
  selectHome(),
  (homeState) => homeState.get('channels')
);

const selectChannelId = () => (state, ownProps) => ownProps.params.channelId;

const selectChannel = () => createSelector(
  selectChannels(),
  selectChannelId(),
  (channels, channelId) => channels.find((channel) => channel.channel_id == channelId)
);

I console the channel

  componentDidMount() {
    console.log(this.props.channel);
    this.props.fetchMessages(this.props.channel);
  }

but i get below, non value, non derived data

Am I doing wrong?

[jk2K]

I found below is work

const mapStateToProps = createStructuredSelector({
  channelId: selectChannelId(),
  channel: selectChannel()
});

What's the difference between the two?

const mapStateToProps = (state, ownProps) => {
  return {
    channelId: ownProps.params.channelId,
    channel: selectChannel()
  }
};

I must use createStructuredSelector function when i use reselect?

[sethmcleod]

I believe you need to pass the selectors you are composing from as an array, like this:

const selectChannel = () => createSelector(
  [ selectChannels, selectChannelId ],
  (channels, channelId) => channels.find((channel) => channel.channel_id == channelId)
);

Check out this link for more info on using ownProps with Reselect: https://stackoverflow.com/questions/36392048/how-can-i-get-ownprops-using-reselect-on-redux/37404975#37404975

[jk2K]

Check out this link
https://github.com/reactjs/reselect#createselectorinputselectors--inputselectors-resultfunc

const mySelector = createSelector(
  state => state.values.value1,
  state => state.values.value2,
  (value1, value2) => value1 + value2
)

// You can also pass an array of selectors
const totalSelector = createSelector(
  [
    state => state.values.value1,
    state => state.values.value2
  ],
  (value1, value2) => value1 + value2
)

they are the some

[igorbarbashin]

You can also pass parameters right from mapStateToProps:

const mapStateToProps = createStructuredSelector({
  channel: selectChannelById(id) // Actually, it's not possible. Sorry for confusion 😅
});

Selector:

const selectChannelById = (id) => createSelector(
  selectChannels(),
  (channels) => channels.find((channel) => channel.channel_id == id)
);

But these kinds of selectors could be useful in sagas:

const channel = yield select(selectChannelById(id));

[mxstbr]

Since this question has been answered quite thoroughly I'll close this issue, but feel free to continue the conversation!

[jk2K]

@igorbarbashin , thanks

const mapStateToProps = createStructuredSelector({
  channel: selectChannelById(id)
});

but the id is in route params, I can get id using this.props.params.channelId

How can I pass it to selectChannelById ?

[igorbarbashin]

@jk2K Yeah, I wrote it and then understood that there's no access to that variable from mapStateToProps. As I then mentioned in the last line this selector could be used in redux-saga.

Your solution is what I actually use:

const mapStateToProps = createStructuredSelector({
  channelId: selectChannelId(), // Gets channel id from ownProps
  channel: selectChannel() // Gets stuff from store
});

[arjshiv]

@jk2K and @igorbarbashin
Not sure if this is still active, but here's how I got around it for something not based on ownProps

Selectors

export const selectFileTypeIsUploading = () => createSelector(
  selectYourStateHere(),
  state => fileType => state.getIn(['uploading', fileType])
);

Component

MapStateToProps

createStructuredSelector({
  fileTypeIsUploading: selectFileTypeIsUploading()
});

propTypes

static propTypes = {
    fileTypeIsUploading: React.PropTypes.func,
  }

Usage

<FileUpload 
  title={uploadType}
  uploading={this.props.fileTypeIsUploading(uploadType)}
/>

[eromoe]

@arjshiv How to modify your code to support ownProps ?

[igorbarbashin]

@eromoe I think it's like this:

const mapStateToProps = createStructuredSelector({
  something: (state, ownProps) => selectSomethingById(ownProps.id)(state, ownProps)
});

[arhtudormorar]

@eromoe I use it this way and it works:

const mapStateToProps = (state, ownProps) => createStructuredSelector({
  selectOptions: selectOptions({ selectId: ownProps.name, formKey: ownProps.form }),
});

[pohsiangchen]

@eromoe here is my solution and it works:

component/container

static propTypes = {
  match: PropTypes.object, // route parameter
};

const mapStateToProps = createStructuredSelector({
  member: makeSelectMemberById(),
});

selector

const selectMembers = (state) => state.get('members');

const makeSelectMemberById = () => createSelector(
  selectMembers,
  // state: redux store
  // props: connected component's props
  (state, props) => props.match.params.memberId,
  (members, memberId) => members.find((member) => member.id === memberId)
);

selector will recompute when the memberId changes

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.