Using Redux Toolkit Query hooks in class components

Question

We have a really large codebase with 271 class components and the old redux (not redux toolkit).

We are in the process of migrating to redux toolkit - and adoption RTK-Query as our async state manager. We will migrate redux-saga based functionality to rtk-query and trim our reducers.

For functional components it's very easy to do both things

get data, loading state
dispatch the action to ask for this data.

 const {data: posts, isLoading, isError, isSuccess } = usePosts();

But how do I do this in a class based component...

componentDidMount(){
  //what to dispatch here ?
}

render(){
   const {data: posts, isLoading, isError, isSuccess } = fromWhichPlace;
}

markerikson · Accepted Answer · 2022-10-14 01:22:32Z

2

We specifically cover this topic in our docs:

Per those pages, you'd need to do something along the lines of:


const mapState = (
  state: RootState,
  ownProps: RouteComponentProps<{ id: string }>
) => ({
  id: Number(ownProps.match.params.id),
  post: endpoints.getPost.select(Number(ownProps.match.params.id))(state),
  updatePostState: endpoints.updatePost.select(ownProps.match.params.id)(state), // TODO: make selectors work with the requestId of the mutation?
  deletePostState: endpoints.updatePost.select(ownProps.match.params.id)(state)
});

const mapDispatch = {
  getPost: endpoints.getPost.initiate,
  updatePost: endpoints.updatePost.initiate,
  deletePost: endpoints.deletePost.initiate
};

const connector = connect(mapState, mapDispatch);
type PostDetailProps = ConnectedProps<typeof connector> & RouteComponentProps;

export class PostDetailComp extends React.Component<PostDetailProps> {
  state = {
    isEditing: false
  };

  componentDidMount() {
    const { id, getPost } = this.props;
    getPost(id);
  }

  componentDidUpdate(prevProps: PostDetailProps) {
    const { id, getPost } = this.props;
    if (id !== prevProps.id) {
      getPost(id);
    }
  }

  render() {
    const { isEditing } = this.state;
    const {
      // state
      id,
      post: { data: post, isLoading: isPostLoading },
      updatePostState: { isLoading: isUpdateLoading },
      deletePostState: { isLoading: isDeleteLoading },

      // actions
      updatePost,
      deletePost
    } = this.props;

    // snip rendering logic
}

export const PostDetail = connector(PostDetailComp);

However, we would strongly recommend that you convert these components to function components instead, and use the auto-generated query hooks! It will be much simpler and easier to use, and the hooks have a lot of built-in functionality that will be hard to replicate by hand in class components.

answered Oct 14, 2022 at 1:22

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

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

2 Comments

Probosckie Over a year ago

well, we have 271 class components and although I do re-write every class to FC where-ever possible - convincing everyone else is a major problem

markerikson Over a year ago

You don't have to rewrite every component right away :) But I can seriously tell you that the work of rewriting the components that need this data to be function components using query hooks will be less effort than trying to manage the RTKQ subscriptions yourself in class components.

Collectives™ on Stack Overflow

Using Redux Toolkit Query hooks in class components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related