使用Redux Toolkit连接Redux商店


由于各种原因,我的工作场所目前正试图将React/Redux引入我们的项目。我们的项目使用了Shopify和它的Liquid模板以及jQuery。他们想向React迁移,到目前为止,我们一直在通过寻找特定的ID并以这种方式注入React组件来注入React。

因此,由于我们现在需要一个存储来保存和渲染数据,我遇到了一个奇怪的问题。如果我将这些注入的组件中的每一个都用一个提供程序和存储包起来,我基本上可以让每个组件都有自己的存储,但这根本没有帮助,因为它几乎是在模仿本地状态。

有没有一种方法可以让我与多个组件"连接"并共享存储?

我想过像往常一样包装整个项目,但这样做会/应该会使Liquid变得无用。

下面是一个例子:

import ReactDOM from "react-dom";
import React from "react";
import attrToProps from "../../../partials/data-attribute-to-props.js";
import FavoritesToggler from "./index.js";
import store from "./../../Store/store"
import { Provider } from "react-redux"
const rootEl = document.getElementById("fav-container-react");
if(rootEl) {
const props = attrToProps(rootEl.attributes);
rootEl && ReactDOM.render(<Provider store={store}><FavoritesToggler {...props} /></Provider>, rootEl);
}

这被注入到包含"fav容器反应"id的div中。

但我们现在有几个,我想知道如何让它们连接到同一家商店。

任何想法都将不胜感激,包括可能的架构更改(为了继续获得资金,我们需要"展示进展",所以启动新项目不是一种选择。这意味着我需要一个能够不断更新遗留代码到React的解决方案(

如果组件有存储道具并且使用connect,则不需要提供程序。钩子不起作用,所以我建议使用一个容器,当所有项目都转换为React时,可以使用钩子重构容器。

const { connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = { counter: 0 };
//action types
const UP = 'UP';
//action creators
const up = () => ({
type: UP,
});
const reducer = (state, { type }) => {
if (type === UP) {
return { ...state, counter: state.counter + 1 };
}
return state;
};
//selectors
const selectCounter = (state) => state.counter;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
() => (next) => (action) => next(action)
)
)
);
const App = ({ count, up }) => {
return <button onClick={up}>{count}</button>;
};
const AppContainer = connect(
(state) => ({
count: selectCounter(state),
}),
{ up }
)(App);
const OtherContainer = connect(
(state) => ({
count: selectCounter(state),
})
)(({count})=><h1>{count}</h1>);
ReactDOM.render(
<AppContainer store={store} />,
document.getElementById('root-1')
);
ReactDOM.render(
<AppContainer store={store} />,
document.getElementById('root-2')
);
ReactDOM.render(
<OtherContainer store={store} />,
document.getElementById('root-3')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root-1"></div>
<div id="root-2"></div>
<div id="root-3"></div>

最新更新