[英]Will Redux inside a React component from npm conflict with the container's Redux?
I want to encapsulate a npm React component, and I want to use Redux to manage state inside this React component.我想封装一个 npm React 组件,我想使用 Redux 来管理这个 React 组件内部的 state。
When another React project imports my component, will this React project's redux instance have conflict with my React component?当另一个 React 项目导入我的组件时,这个 React 项目的 redux 实例会和我的 React 组件冲突吗?
Here is the example: The component will look like:这是示例:组件将如下所示:
// 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>;
}
Then, I create another React project, and import the FileExplorer
component from npm然后,我创建另一个 React 项目,并从 npm 导入
FileExplorer
组件
index.jsx索引.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应用程序.jsx
import FileExplorer from 'file-explorer';
export default function App() {
return (
<div className="App">
<FileExplorer source={'https://example.com/data/v1/files'} />
</div>
);
}
A couple thoughts here.这里有几个想法。
The first is yes, this would absolutely cause a clash if the components nested inside of <FileExplorer>
also need to access the app-wide Redux store, because by default all Redux-connected React components access the same store instance via React context.第一个是肯定的,如果嵌套在
<FileExplorer>
内的组件也需要访问应用程序范围的 Redux 存储,这绝对会导致冲突,因为默认情况下,所有 Redux 连接的 React 组件都通过 React 上下文访问同一个存储实例。
It is technically possible to pass an alternate context to <Provider>
and create customized versions of useSelector/useDispatch
that read the store from that context:从技术上讲,可以将备用上下文传递给
<Provider>
并创建自定义版本的useSelector/useDispatch
从该上下文读取存储:
https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context
although it looks like we don't actually document the API for creating the context-customized versions of the selector hooks atm.虽然看起来我们实际上并没有记录 API 用于创建选择器挂钩 atm 的上下文定制版本。
React-Redux should be exporting createSelectorHook
and createDispatchHooks
functions, which you can see in use here: React-Redux 应该导出
createSelectorHook
和createDispatchHooks
函数,您可以在此处看到它们的使用情况:
https://github.com/reduxjs/react-redux/blob/v7.2.6/src/hooks/useSelector.js#L166 https://github.com/reduxjs/react-redux/blob/v7.2.6/src/hooks/useSelector.js#L166
Should be used as:应该用作:
const useCustomContextSelector = createSelectorHook(MyCustomContext);
All that said: I'd still lean towards tracking the state in a useReducer
hook as the default rather than an actual separate Redux store.所有这一切:我仍然倾向于在
useReducer
挂钩中跟踪 state 作为默认值,而不是实际单独的 Redux 存储。
Note that you can use RTK's createSlice
to create a reducer specifically for use in a useReducer
hook - reducer functions are just functions and work fine in either place.请注意,您可以使用 RTK 的
createSlice
创建专门用于useReducer
挂钩的减速器 - 减速器函数只是函数,并且在任何地方都可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.