HenrikJoreteg / redux-bundler

Compose a Redux store out of smaller bundles of functionality.
https://reduxbundler.com
583 stars 46 forks source link

How we can pass props to selectors from component that I get as nav params to that component? #51

Closed amrit-sahoo closed 5 years ago

amrit-sahoo commented 5 years ago

Hi, I am using redux-bundler for RN. My component looks like this. ` import React, { Component } from 'react'; import { Text, View } from 'react-native'; import { connect } from 'redux-bundler-react';

class CoursePlayer extends Component { render() { return ( <View style={{ flex: 1 }} /> ); } }

export default connect( 'selectCourseDetails', 'selectCourseDetailsRaw', CoursePlayer, ); `

Here in the above code I want to pass some argument.

selectCourseDetailsRaw: state => state.courseDetails,

selectCourseDetails: (state, props) => { return state.courseDetails.data; },

How I can get the props in the selectors ?

HenrikJoreteg commented 5 years ago

The recommended pattern is actually to not pass props to selectors. But instead have a selector that passes the relevant identifier.

For example, using the course example from above, I'd create a selector named:

assuming you've got a route defined that is something like /course/:courseId you can write a selector that grabs the "active" course data from your state.

selectActiveCourseId: createSelector(
  'selectRouteParams',
  params => params.courseId
),
selectActiveCourseData: createSelector(
  'selectCourseData',
  'selectActiveCourseId',
  (data, id) => data[id]
)

Then your component can just connect('selectActiveCourseData') and as long as you're on the right URL you'll have the right data in the component.