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

Question

我正在尝试将 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 中的所有问题和问题的解决方案以及上下文 api 修复它的方式。但我不确定如何在实际项目中实际实施它。

有人遇到同样的问题吗？或者你能告诉我如何准确地实施这个改变吗？

谢谢

Answer 1

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

我的代码有两个问题

我将 store 作为道具传递给我的 <App /> 组件。这就是第一个 warning/error 消息出现的原因。

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 作为 props 传递给任何组件

我的 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'),
);

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

how to implement the new react-redux v6.0.0

javascript

reactjs

react-redux

react-context