Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Peer dependencies #587

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

andreizanik
Copy link

@andreizanik andreizanik commented Aug 25, 2022

Updated peer dependencies
Support react 18.2.0 and react-redux 8.0.0
#585
#577

@vlone310
Copy link

Please, check this PR

@andreizanik
Copy link
Author

andreizanik commented Aug 29, 2022

@vlone310
I think this project isn't supported
I decided to try the package mentioned in the issue #579

@achepukov
Copy link

Closes #612, please merge it

@andreizanik
Copy link
Author

Closes #612, please merge it

Unfortunately, author of the repository has not been active for a long time

@achepukov
Copy link

maybe there is a fork with react v18 support?

@avindra
Copy link
Contributor

avindra commented Mar 22, 2023 via email

@achepukov
Copy link

@avindra I have complex selectors, which filters data based on url params (?a=1&b=2). Moving this logic into the a component is not an option for me. Do you have a solution?

@avindra
Copy link
Contributor

avindra commented Apr 13, 2023

With useSelector, you can pass params as everything is in the same scope. Say for example you had a query param named userId that you wanted to use in your redux selector:

import React from 'react';
import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';

const UserProfile = () => {
  const { userId } = useParams();
  const user = useSelector((state) => state.users[userId]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      {/* Render more user details */}
    </div>
  );
};

export default UserProfile;

Keep in mind you can swap useParams with your own implementation or a third-party one like use-query-params.

@avindra
Copy link
Contributor

avindra commented Apr 13, 2023

If you still have a lot of class-based components (which BTW you should get rid of to keep on track with latest react)... then you can use withRouter to get what you need. E.g.,:

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

const UserProfile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      {/* Render more user details */}
    </div>
  );
};

const mapStateToProps = (state, ownProps) => {
  const userId = ownProps.match.params.userId;
  return {
    user: state.users[userId],
  };
};

export default withRouter(connect(mapStateToProps)(UserProfile));

@achepukov
Copy link

@avindra yeah, thank, but this looks like workaround rather then good fix.

Moving this logic into the a component is not an option for me.

Cuz fix this way means that I add logic into the component which is needed only in selectors. I do not need those values in component, but in selectors only. That's why it's too early to say that

The premise of this library is wrong/ obsolete.

@avindra
Copy link
Contributor

avindra commented Apr 13, 2023

this looks like workaround

Happy to disagree. FWIW, I removed a hundred or so of these connected router hacks, dropped connected-react-router and the code became much clearer in a codebase with over 80K SLOC.

Once again, useParams is the best option. If you need a connected like approach, then use withRouter.

@achepukov
Copy link

achepukov commented Apr 14, 2023

@avindra

I removed a hundred or so of these connected router hacks

could you please explain in detail what exactly you did? I didn't get it. From the example you provided it looks like you did not remove the logic, but moved it into component instead.

@avindra
Copy link
Contributor

avindra commented Apr 17, 2023

If you use withRouter, everything is done within the selector (using ownProps to access router data).

As you noted, with the useParams approach, some of the code gets moved to the component.

If you need to abstract the selector to a separate function, I suggest creating a hook. I have provided an example for this case.


file: hook.js

import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';

export function useUser() {
  const { userId } = useParams();
  const user = useSelector((state) => state.users[userId]);
  return user;
}

file: Component.js

import React from 'react';
import {useUser} from './hook.js'

const UserProfile = () => {
  const user = useUser();

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      {/* Render more user details */}
    </div>
  );
};

export default UserProfile;

@achepukov
Copy link

@avindra thanks lot! This looks much better from what I thought initially. But again, create new hook just to filter the selector data based on query params looks less nice then incapsulate this logic in selectors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants