No se pudo encontrar el valor de contexto de react-redux; asegúrese de que el componente esté envuelto en un aunque el componente está envuelto en un proveedor

Tengo una aplicación React on Rails y no puedo renderizar debido a could not find react-redux context value; please ensure the component is wrapped in a <Provider>.

Componente (contenido interno e importaciones omitidas por brevedad):

const MyPage = ({ reduxData, payloads }) => {
  const store = useReduxStore(reduxData);
  const jads = new JsonApiDataStore();
  const users = jads.sync(payloads.users);
  //custom selector
  const pathName = useSelector(selectPathName);

  return (
    <Provider store={store}>
       <div>
         {users.map((user) => (
             <li key={user.id} />
         ))}
       </div>
      <div>{pathname}</div>
    </Provider>
  );
};

MyPage.propTypes = {
  reduxData: PropTypes.shape(ReduxData).isRequired,
  payloads: PropTypes.shape({
    users: PropTypes.shape(Payload).isRequired,
  }).isRequired,
};

export default MyPage;

view(index.html.erb para este directorio/controlador)

<% content_for :title, "MyPage" %>

<% page = react_component_hash(
  "MyPage",
  props: {
    reduxData: redux_data,
    payloads: {
      users: serialize(
        @users,
        UserSerializer,
      ),
    }
  },
  prerender: true
) %>

<% content_for :page_styles, page["componentCss"] %>
<%= page["componentHtml"] %>

Ruta del controlador:

  def index
    @users = User.all
    render layout: "react"
  end

en mi controlador de aplicación:

  def redux_data
    {
      data: {
        pathName: request.path
      },
      currentUser: serialize(current_user, CurrentUserSerializer, include: %w[company])
    }
  end
  helper_method :redux_data

(Esto funciona en otras páginas con una configuración similar).

¿Qué me estoy perdiendo?

Answer

El problema era que estaba tratando de usar un selector en el mismo componente que proporcionó el Providercontexto /, esencialmente antes de que se proporcionara el contexto. En cambio, necesitaba usar selectores solo en componentes secundarios/dentro del componente principal que tiene el <Provider />contenedor para que el selector tenga acceso al contexto.

En mi caso:

componente hijo:

const ChildComponent = () => {
  const pathName = useSelector(selectPathName);
  return (
    <div>{pathname}</div>
  );
};

export default ChildComponent;

componente padre:

const MyPage = ({ reduxData, payloads }) => {
  const store = useReduxStore(reduxData);
  const jads = new JsonApiDataStore();
  const users = jads.sync(payloads.users);

  return (
    <Provider store={store}>
       <div>
         {users.map((user) => (
             <li key={user.id} />
         ))}
       </div>
      <ChildComponent />
    </Provider>
  );
};

MyPage.propTypes = {
  reduxData: PropTypes.shape(ReduxData).isRequired,
  payloads: PropTypes.shape({
    users: PropTypes.shape(Payload).isRequired,
  }).isRequired,
};

export default MyPage;