使用redux工具箱连接redux存储

qmelpv7a 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(423)

出于各种原因，我的工作场所目前正试图将react/redux引入到我们的项目中。我们的项目利用shopify及其liquid模板和jquery。他们希望迁移到react，到目前为止，我们一直在通过寻找特定的id来注入react，并以这种方式注入react组件。
因此，由于我们现在需要一个存储来保存和渲染数据，我遇到了一个奇怪的问题。如果我用一个提供者和存储来 Package 这些注入的组件中的每一个，我基本上可以让每个组件都有自己的存储，但这一点都没有帮助，因为它几乎是在模仿本地状态。
是否有一种方法可以让我与多个组件“连接”并共享存储？
我曾考虑过像往常一样把整个项目 Package 起来，但这样做会/应该会使液体变得无用。
下面是一个发生了什么的例子：

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容器React”id的div中。
但目前我们有几个这样的商店，我想知道如何让它们连接到同一个商店。
任何想法都将受到欢迎，包括可能的架构变更（为了继续获得资金，我们需要“展示进展”，因此启动新项目不是一个选项）。这意味着我需要一个能够不断更新旧代码以作出React的解决方案）

JavaScript reactjs store redux redux-toolkit

来源：https://stackoverflow.com/questions/68342625/connecting-redux-stores-using-redux-toolkit

1条答案

按热度按时间

m0rkklqb1#

如果组件具有store道具且您使用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);

ReactDOM.render(
  <AppContainer store={store} />,
  document.getElementById('root-1')
);
ReactDOM.render(
  <AppContainer store={store} />,
  document.getElementById('root-2')
);

<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>

赞(0）回复(0）举报 2021-09-13

我来回答

使用redux工具箱连接redux存储

1条答案

相关问题

热门标签

最新问答