Question

我正在尝试将react-redux v5.X.X迁移到v6.0.0，似乎没有任何相关文档。我正在使用以下版本： "react": "^16.4.2" "redux": "^4.0.0" "react-redux": "^6.0.0"

官方变更日志说。

不再支持将存储作为道具传递给已连接的组件。相反，您可以向和都传递自定义context = {MyContext}属性。您也可以通过{context：MyContext}作为连接选项。链接为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会产生以下错误

传递道具中的redux存储已被删除，并且不执行任何操作。要将自定义Redux存储区用于特定组件，请使用React.createContext（）创建自定义React上下文，并将上下文对象传递给React-Redux的Provider和特定组件，例如：。您还可以通过{context：MyContext}选项进行连接

并传递为context会出现以下错误

在“ Connect（App）”的上下文中找不到“商店”。要么将根组件包装在中，要么在连接选项中将自定义React上下文提供程序传递给Connect（App），并将相应的React上下文使用者传递给Connect（App）。

我没有找到任何文档期望这个Redux历史文档here能够说明react-redux中的所有问题和解决方案，以及上下文api如何对其进行修复。但我不确定如何在实际项目中实际实施它。

有人遇到同样的问题吗？或者您能告诉我如何准确地执行此更改。

谢谢

Answer 1

我能够通过实际听错误消息说什么来解决问题。

我的代码有两个问题

我正在将store作为道具传递给我的<App />组件。这就是为什么出现第一条警告/错误消息的原因。

传递道具中的redux存储已被删除，并且不执行任何操作。要将自定义Redux存储区用于特定组件，请使用React.createContext（）创建自定义React上下文，并将上下文对象传递给React-Redux的Provider和特定组件，例如：。您还可以通过{context：MyContext}选项进行连接

要解决此问题，只需不要将整个redux store作为道具传递给任何组件

Provider

我的react-redux不是根组件。错误消息说

在“ Connect（App）”的上下文中找不到“商店”。要么包装提供者中的根组件，或将自定义React上下文提供者传递给和相应的React上下文使用者到Connect（App）连接选项

所以我紧随句子中的第二句

要么将根组件包装在Provider中，要么传递自定义的React上下文

所以我把我的主要根包裹在提供者中。一切开始顺利。

ReactDOM.render(
  <Provider store={reduxStore}>
    <App />
  </Provider>, document.getElementById('root'),
);

Answer 2

我遇到了同样的问题，这就是我解决的方法。

const MyContext = React.createContext();

class App extends Component {
render() {
return (
<Provider store = {store} context={MyContext}>
  <BrowserRouter>
    <div>
      <Main context={MyContext}/>
    </div>
  </BrowserRouter>
</Provider>
);
}
}

如何实施新的react-redux v6.0.0

2 个答案: