reactjs - 重新渲染应用程序导致创建两个 redux 存储实例
问题描述
我有一个模式的 react-redux 应用程序。我需要从外面切换它。我最初的应用是这样的:
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import App from './lib/containers/App';
import reducer from './lib/ducks/reducers';
import MY_PROPTYPES from './lib/proptypes';
/* eslint-disable no-underscore-dangle */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|| compose;
/* eslint-enable */
const middleware = [];
middleware.push(thunk);
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line global-require
const { createLogger } = require('redux-logger');
middleware.push(createLogger());
}
export default class Gallery extends PureComponent {
render() {
const initState = {
...
};
const store = createStore(
reducer,
initState,
composeEnhancers(applyMiddleware(...middleware))
return (
<Provider store={store}>
<App
onClose={e => onClose(e)}
isVisible={isVisible}
initialPosition={initialPosition}
/>
</Provider>
);
}
}
当我关闭模式并打开它时,这给我带来了问题。尽管商店发生了变化,但它会停止重新渲染。所以相应地存储更改,但我的应用程序没有对这些更改做出反应。我发现这是因为我创建了不同的商店实例并将其再次传递给我的应用程序,但它仍然连接到以前的商店。
所以,我改变了我的入口点:我在 state 中添加了带有 store 的构造函数,并将创建 store 更改为以下代码:
let newStore = store;
if (!newStore) {
newStore = createStore(
reducer,
initState,
composeEnhancers(applyMiddleware(...middleware))
);
this.setState({ store: newStore });
}
我将这个 newStore 传递给我的 Provider。这解决了我的问题,App 正在根据商店发生变化,但现在我有这个 JS 错误:
警告:在现有状态转换期间无法更新(例如在 内
render
)。渲染方法应该是 props 和 state 的纯函数。
我的 package.json:
{
"name": "@fishingbooker/gallery",
"version": "1.0.0",
"description": "",
"main": "./dist",
"directories": {
"doc": "docs"
},
"scripts": {
"lib": "babel src -d dist",
"lib:watch": "babel src -w -d dist",
"docs": "webpack-dev-server --open",
"start": "webpack-dev-server --open --mode development --host 0.0.0.0 --disable-host-check --https",
"docs:prof": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/helper-plugin-utils": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"@fishingbooker/react-slick": "0.0.5",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"lodash": "^4.17.11",
"mousetrap": "^1.6.2",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-redux": "^6.0.0",
"react-swipe": "^6.0.3",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
}
有谁知道我该如何解决这个错误,或者如何重新呈现我的入口点,以便我的应用程序保持与商店的连接。
提前致谢。
解决方案
推荐阅读
- python-3.x - 使用 train_test_split 并使用 mne CSP 进行交叉验证的不同结果
- c# - C# 将分钟添加到计时器 (WPF/XAML)
- c++ - 如何在 c++ 中使用不同长度的数组初始化嵌套的 2D int 数组(或指向 int[] 的指针数组?)?
- django-models - 模型指的是同一models.py中的另一个类
- reactjs - React Draft WYSIWYG - 将数据包装在 div 或 span 中
- ios - 致命异常: NSInternalInconsistencyException ,在计算索引路径处插入行的新间隙的开始时,先前的新全局行无效
- python - 如何在python中从数据集中选择行
- java - Spring/Hibernate 多个数据源之间具有外键
- ios - 为什么第二个@State 变量会使我在 SwiftUI 中的程序崩溃
- c++ - C++:我的 claculator 中的 while 循环阻塞了 switch case