Access REDUX state inside HOC

user_9871046 0
Viewed 341

First of all I'm new to react and coding in general and have become stuck.

I'm trying to build components that I can favorite and render on a separate page.

I'm using redux to store the state of the components whether it has been favorited or not.

The problem I'm having is in my HOC (isFavorited) I can not access redux useSelector

const isFavorited = (Component) => {
  const url = "URL"; //This will check wheater im on the page that I always want it rendering 
  const count = useSelector((state) => state.favourite.value); //Need to check weather the render state
  console.log(Component);
  if (count === 1 || url === "url") {
    return (props) => <Component {...props} />;
  }
  return () => <span>No render</span>;
};

const CardLong = isFavorited((props) => {
  const count = useSelector((state) => state.favourite.value);

  const dispatch = useDispatch();
  return (
    **MY JSX IS HERE REMOVED FOR EASY READING**
  );
});

export default CardLong;

error

react-redux redux react-hooks next.js reactjs
1 Answers

You should put react hooks inside a react function component instead of a pure JavaScript high-order function.

Refactor it like this:

index.tsx:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const IsFavorited = (Component) => {
  return function Wrapper(props) {
    const count = useSelector((state: any) => state.favourite.value);

    if (count === 1) {
      return <Component {...props} />;
    }
    return <span>No render</span>;
  };
};

const CardLong = IsFavorited((props) => {
  const count = useSelector((state: any) => state.favourite.value);
  console.log('cardlong props.name:', props.name);
  const dispatch = useDispatch();
  return <div>card long</div>;
});

export default CardLong;

index.test.tsx:

import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import { Provider } from 'react-redux';
import createMockStore from 'redux-mock-store';
import CardLong from '.';

const mockStore = createMockStore();

describe('hoc hooks', () => {
  let container;
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });
  test('should no render', () => {
    const store = mockStore({ favourite: { value: 123 } });
    act(() => {
      render(
        <Provider store={store}>
          <CardLong />
        </Provider>,
        container
      );
    });
    expect(container!.innerHTML).toMatchInlineSnapshot(`"<span>No render</span>"`);
  });
  test('should render card long', () => {
    const store = mockStore({ favourite: { value: 1 } });
    act(() => {
      render(
        <Provider store={store}>
          <CardLong name="teresa teng" />
        </Provider>,
        container
      );
    });
    expect(container!.innerHTML).toMatchInlineSnapshot(`"<div>card long</div>"`);
  });
});

test result:

 PASS  issues/hoc-hooks/index.test.tsx (8.031 s)
  hoc hooks
    ✓ should no render (16 ms)
    ✓ should render card long (18 ms)

  console.log
    cardlong props.name: teresa teng

      at issues/hoc-hooks/index.tsx:17:11

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        8.541 s
user_64635580
Related