来自 npm 的 React 组件中的 Redux 会与容器的 Redux 冲突吗？

Question

我想封装一个npm React组件，我想在这个React组件内部使用Redux来管理状态。
当另一个React项目导入我的组件时，这个React项目的redux实例会不会和我的React组件冲突？

示例如下：该组件将如下所示：

// File Explorer Component, will be build into a npm package
import React from "react";
import { Provider } from "react-redux";
import { store } from "./store";
function FileExplorer({source}) {
  <Provider store={store}>
     {/* there will be complicated business logic inside */}
  </Provider>;
}

然后，我创建另一个 React 项目，并从 npm

导入 FileExplorer 组件

index.jsx

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store"; // this store is a different one
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

App.jsx

import FileExplorer from 'file-explorer';

export default function App() {
  return (
    <div className="App">
     <FileExplorer source={'https://example.com/data/v1/files'} />
    </div>
  );
}

Answer 1

这里有几点想法。

第一个是肯定的，如果嵌套在 <FileExplorer> 中的组件也需要访问应用程序范围的 Redux 存储，这绝对会导致冲突，因为默认情况下所有连接 Redux 的 React 组件都访问相同的通过 React 上下文存储实例。

在技术上可以将备用上下文传递给 <Provider> 并创建从该上下文读取存储的 useSelector/useDispatch 的自定义版本：

https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context

尽管看起来我们实际上并没有记录 API 用于创建选择器挂钩 atm 的上下文定制版本。

React-Redux 应该导出 createSelectorHook 和 createDispatchHooks 函数，您可以在此处看到它们的使用：

https://github.com/reduxjs/react-redux/blob/v7.2.6/src/hooks/useSelector.js#L166

应用作：

const useCustomContextSelector = createSelectorHook(MyCustomContext);

综上所述：我仍然倾向于在 useReducer 挂钩中跟踪状态作为默认设置，而不是实际的单独 Redux 存储。

请注意，您可以使用 RTK 的 createSlice 创建一个专门用于 useReducer 挂钩的减速器 - 减速器功能只是功能，在任何地方都可以正常工作。

来自 npm 的 React 组件中的 Redux 会与容器的 Redux 冲突吗？

Will Redux inside a React component from npm conflict with the container's Redux?

javascript

npm

reactjs

redux