bug(firebaseConnect): 'reserved props' prevents connect before firebaseConnect

[jake-nz]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When wrapping with redux connect an error is thrown because a prop named dispatch is passed.

Error: Supplied prop/s "dispatch" are reserved for internal firebaseConnect() usage.

relivant react-redux-firebase code

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

const Thing = () => <div />

const ThingContainer = compose(
  connect(state => ({
    itemId: itemIdSelector(state)
  })),
  firebaseConnect(({ itemId }) => {
    return [`/items/${itemId}`]
  })
)

export default ThingContainer(Thing)

What is the expected behavior?
I'm not familiar with why 'reserved props' are used in react-redux-firebase but it seems like a problematic idea. If a component does not need a prop, shouldn't it just ignore it? Maybe a warning at most? This is especially try of a HOC as they normally pass through props.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

• react-redux-firebase v3.0.0-alpha.11

[prescottprue]

Yeah, this was introduced in v3.0.0-alpha.7, and I was thinking something like this may appear. I like the idea of switching that to a warning instead of an error through - also though, dispatch may not need to be in that list.

@theashguy & @iamthefox did either of remember why it was a throw instead of just a warning?

[iamthefox]

@prescottprue it was done to fix this https://github.com/iamthefox/react-redux-firebase/blob/next-nested-issues/examples/complete/nested-issue/src/Home.js#L30

And yes it will complain because most probably connect will pass "firebase" and "dispatch" props (that comes from firebase reducer and redux itself)

I feel like this solution not quite working, will look into it.

[electricBonfire]

I am trying to access this.props.firebase.storage() as described in the docs: http://docs.react-redux-firebase.com/history/v3.0.0/docs/storage.html

I am using firestoreConnect and do have a this.props.firebase property however I get the error TypeError: this.props.firebase.storage is not a function

When I try to add firebaseConnect I get the error as mentioned in this thread.

Is there another way to access firebase.storage() using firestoreConnect?
Or a workaround for my use case?

Here is my implementation of the HOCs:

export default compose(
    connect(mapStateToProps),
    firestoreConnect( (props) => ([
        { collection: 'merchants' },
        { collection: 'offers', where: ["merchantId", "==", props.match.params.id] },
    ]))
)(MerchantDetails)

[prescottprue]

@electricBonfire That seems like a bug since we still want to be passing down the storage instance, I will continue to investigate

[electricBonfire]

My mistake, I needed to import firebase/storage.

https://stackoverflow.com/questions/56420198/react-redux-firebase-cannot-get-firebase-storage/56420208#56420208

This was not clear in the docs, it might be helpful to others if it was added to the storage documentation. I followed a video series that integrated this library and I did not read through the setup/installation docs for the lib. If this info is listed there it might be useful to also mention this on the actual storage doc page

[prescottprue]

Proposed solution implemented in v3.0.0-alpha.13 release. Reach out if it isn't working as expected and we can reopen. Thanks to all for helping test out the next version.