我正在尝试将 react-redux
v5.X.X
迁移到 v6.0.0
并且似乎没有任何文档。
我正在使用以下版本:
“ react ”:“^16.4.2”
"redux": "^4.0.0"
"react-redux": "^6.0.0"
官方更改日志说。
Passing store as a prop to a connected component is no longer supported. Instead, you may pass a custom context={MyContext} prop to both and . You may also pass {context : MyContext} as an option to connect. link is here
这是我的根 index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { configureStore, history } from './Store';
import App from './App.hot';
import 'antd/dist/antd.min.css';
const reduxStore = configureStore();
ReactDOM.render(<App store={reduxStore} history={history} />, document.getElementById('root'));
这是我的app.jsx
(根组件)
import React from 'react';
import PropTypes from 'prop-types';
import { Provider, connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ConnectedRouter } from 'connected-react-router';
import Layout from './Layout';
class App extends React.Component {
static propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
render() {
const { store, profile, history } = this.props;
return (
<main className="app-wrapper">
// what i understand from change log is this part
// i need to pass context instead of store as props.
<Provider store={store}>
<ConnectedRouter history={history}>
<Layout user={profile} />
</ConnectedRouter>
</Provider>
</main>
);
}
}
function mapStateToProps(store) {
return {
...
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
...
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
根据更改日志,我创建了 context
并将其传递给提供者
const storeContext = React.createContext(reduxStore);
这是更改后的render
函数
render() {
const { store, profile, history } = this.props;
return (
<main className="app-wrapper">
<Provider context={storeContext}>
<ConnectedRouter history={history}>
<Layout user={profile} />
</ConnectedRouter>
</Provider>
</main>
);
}
将 store
作为 props
传递给 provider
会出现以下错误
Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect
并作为 context
传递会出现以下错误
Could not find "store" in the context of "Connect(App)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(App) in connect options.
我没有找到任何文档,除了这个 redux 历史文档 here它讲述了 react-redux 中的所有问题和问题的解决方案,以及 context api 是如何修复它的。但我不确定如何在实际项目中实际实现它。
有人遇到过同样的问题吗?或者你能告诉我如何准确地实现这个改变吗?
谢谢
最佳答案
我能够通过实际聆听错误消息所说的内容来解决问题。
我的代码有两个问题
- 我路过
store
作为我的<App />
的 Prop 零件。这就是第一个警告/错误消息出现的原因。
Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect
要解决此问题,请不要通过整个 redux store
作为任何组件的 Prop
- 我的
Provider
来自react-redux
不是根组件。错误信息说
Could not find "store" in the context of "Connect(App)". Either wrap the root component in a Provider , or pass a custom React context provider to and the corresponding React context consumer to Connect(App) in connect options
所以我跟着句子中的第二个婉铃
Either wrap the root component in a Provider , or pass a custom React context
所以我将我的主根封装在提供者中。事情开始运作良好。
ReactDOM.render(
<Provider store={reduxStore}>
<App />
</Provider>, document.getElementById('root'),
);
关于javascript - 如何实现新的 react-redux v6.0.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53731621/