7

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

官方更改日志说。

不再支持将 store 作为 prop 传递给连接的组件。相反，您可以将自定义 context={MyContext} 属性传递给 和 。您也可以通过 {context : MyContext} 作为连接选项。链接在这里

这是我的根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以下错误

在 props 中传递 redux store 已被删除，并且不执行任何操作。要为特定组件使用自定义 Redux 存储，请使用 React.createContext() 创建自定义 React 上下文，并将上下文对象传递给 React-Redux 的 Provider 和特定组件，例如：你也可以传递一个 {context : MyContext} 选项来连接

并传递为context给出以下错误

在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给 Connect(App)。

我没有找到任何文档，期望这个 redux 历史文档在这里它告诉了 react-redux 中问题的所有问题和解决方案以及上下文 api 如何修复它。但我不确定如何在实际项目中实际实施它。

有没有人面临同样的问题？或者你能告诉我如何准确地实施这个改变。

谢谢

4

2 回答 2

14

我能够通过实际聆听错误消息的内容来解决问题。

我的代码有两个问题

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

在 props 中传递 redux store 已被删除，并且不执行任何操作。要为特定组件使用自定义 Redux 存储，请使用 React.createContext() 创建自定义 React 上下文，并将上下文对象传递给 React-Redux 的 Provider 和特定组件，例如：你也可以传递一个 {context : MyContext} 选项来连接

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

  1. 我Provider的 fromreact-redux不是根组件。错误信息说

在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 Provider 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给 Connect(App)

所以我跟着句子中的第二个wanring

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

所以我将我的主要根包裹在提供者中。事情开始运作良好。

ReactDOM.render(
  <Provider store={reduxStore}>
    <App />
  </Provider>, document.getElementById('root'),
);
于 2018-12-25T18:16:04.353 回答
0

我有同样的问题，这就是我解决它的方法。

const MyContext = React.createContext();

class App extends Component {
  render() {
    return (
      <Provider store = {store} context={MyContext}>
        <BrowserRouter>
          <div>
            <Main context={MyContext}/>
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}
于 2018-12-30T15:38:11.657 回答