找不到 react-redux 上下文值；请确保组件包装在 <Provider> 中，尽管组件包装在提供程序中

Question

我在 Rails 应用程序上有一个 React，由于 could not find react-redux context value; please ensure the component is wrapped in a <Provider>，我无法呈现。

组件（为简洁起见省略了内部内容和导入）：

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;

查看（index.html.erb 对于这个 directory/controller）

<% 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"] %>

控制器路由：

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

在我的应用程序控制器中：

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

（这适用于具有类似设置的其他页面）。

我错过了什么？

Answer 1

问题是我试图在提供 Provider / 上下文的同一组件中使用选择器，基本上是在提供上下文之前。相反，我只需要在具有 <Provider /> 包装器的子组件/主组件中使用选择器，以便选择器可以访问上下文。

就我而言：

子组件：

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

export default ChildComponent;

父组件：

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;

找不到 react-redux 上下文值；请确保组件包装在 <Provider> 中，尽管组件包装在提供程序中

Could not find react-redux context value; please ensure the component is wrapped in a <Provider> although component is wrapped in a provider

ruby-on-rails

reactjs

redux