React-Redux - Hooks API

Question

I'm trying to configure my new react-redux application to use the new features of React-Redux. The official documentation says

React Redux now offers a set of hook APIs as an alternative to the existing connect() Higher Order Component.

I have been trying to find some helping articles related to Hooks API with some real examples but all react-redux Apps are using connect function. Official documentation also shows very basic examples.

I want to change the connect functions in my App with useSelector (offered by Hooks API).

Here is an example code snippet from my application.

//MessagesListContainer
export default connect(
  // mapStateToProps
  (state:State) => ({
    activeUser: getActiveUser(state),   
    messages: getMessagesList(state),   
  })
)(MessagesList)

//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

Mike Perry Yeboah Attara · Accepted Answer · 2020-03-31 14:56:05Z

11

+50

Hooks are not compatible with Class components. To use Hooks, you convert the class components to function components. For instance, your code can be refactored to

/**
 *  Messages List
 */

const getActiveUser = (state: State) => state.activeUser;
const getMessagesList = (state : State) => (Object.keys(state.messages).map((key : any)=> state.messages[key]));

const MessagesList: React.FC = () => {
  const activeUser = useSelector(getActiveUser);
  const messagesList = useSelector(getMessagesList);

  ....
}

export default MessagesList;

edited Mar 31, 2020 at 14:56

answered Mar 31, 2020 at 11:24

Mike Perry Yeboah Attara

2962 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DevLoverUmar · Accepted Answer · 2020-04-10 04:46:52Z

Hooks API facilitates function components, so I nested my class component inside a function component like this:

//messages-list.container.tsx
//MessagesListContainer
export const MessagesListContainer = () => {
   const activeUser= useSelector((state:State) => getActiveUser(state));
   const messages= useSelector((state:State) => getMessagesList(state));
   return <MessagesList activeUser={activeUser} messages={messages} />
}


//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

//end of messages-list.container.tsx

//messages-list.component.tsx
export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default class MessagesList extends PureComponent<IMessagesListProps> {
.
.
.
}

As per my perception, it's better to keep the last level components isolated from the store.

Collectives™ on Stack Overflow

React-Redux - Hooks API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related