CODEWITHSUNDEEP
reactjsreact-nativereduxreselect
Shashika Virajh
Shashika Virajh

Reputation: 9477

Replace useSelector with createStructuredSelector in react-native

I use reselect library with my react-native project. I have the following code.

import { createSelector } from 'reselect';

import { ApplicationState } from 'types/reducer.types';

const selectAuth = ({ auth }: ApplicationState) => auth;

export const selectFirstName = createSelector([selectAuth], auth => auth.user?.firstName);

export const selectLastName = createSelector([selectAuth], auth => auth?.user?.lastName);

In the container the code is like this.

import { connect } from 'react-redux';
// import { useSelector } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import { signOut } from 'Redux/auth/auth.actions';
import { selectFirstName, selectLastName } from 'Redux/auth/auth.selectors';
import CustomDrawer from './custom-drawer.component';

const mapStateToProps = createStructuredSelector({
  firstName: selectFirstName,
  lastName: selectLastName,
});

export default connect(mapStateToProps, { signOut })(CustomDrawer);

Now I want to use useSelector hook. I tried several ways but it didn't work. How can this be done?

Upvotes: 0

Views: 1841

Answers (2)

NeverQuit
NeverQuit

Reputation: 53

useSelector and useDispatch are two hooks that can be imported from react-redux package and these two can easily replace the need for using connect.

Here is how you can use them:

import { useDispatch, useSelector } from 'react-redux';
import {someAction} from '../user/userActions';

const YourComponent = () => {
 // useDispatch returns back a dispatch function
 const dispatch = useDispatch();
 // useSelector selects a portion of the state, it plays the role and 
// replace the need for mapStateToProps in connect higher order function
 const currentUser = useSelector(state => state.user.currentUser);

 return(
   <>
      <h1>{ currentUser.firstName }</h1>
      // Here you can use dispatch to dispatch an action
      <button onClick={() => dispatch(someAction)}></button>
   </>
 )
};

export default YourComponent;

Overall, you can see that by using useSelector and useDispatch we removed so much boilerplate from our code(connect, mapStateToProps, mapDispatchToProps, createStructuredSelector removed) and it looks clean and more readable and still works as previous.

Here is the official resource you can read more about the two above-mentioned hooks. React-Redux Hooks

P.S. You can also send a selector created using reselect or whatever selector of your choice into useSelector.

Upvotes: 0

Linda Paiste
Linda Paiste

Reputation: 42218

createStructuredSelector returns a selector (a function that takes state and returns an object {firstName, lastName}), so you can use it inside of useSelector

const {firstName, lastName} = useSelector(createStructuredSelector({
  firstName: selectFirstName,
  lastName: selectLastName,
}));

or using your existing variable

const {firstName, lastName} = useSelector(mapStateToProps);

However there's not really any point in combining and then destructing the properties when you can use many useSelector hooks in one component.

const firstName = useSelector(selectFirstName);

const lastName = useSelector(selectLastName);

Upvotes: 1

Related Questions