Как внедрить новый response-redux v6.0.0

Question

Я пытался мигрировать react-reduxv5.X.X в v6.0.0 и, кажется, нет никакой документации для этого. Я использую следующие версии: "react": "^16.4.2""redux": "^4.0.0""react-redux": "^6.0.0"

Официальный журнал изменений говорит.

Передача хранилища в качестве реквизита для подключенного компонента больше не поддерживается. Вместо этого вы можете передать пользовательский контекст context {{MyContext} prop обоим и. Вы также можете передать {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 выдает следующую ошибку

Передача избыточного хранилища в реквизит была удалена и ничего не делает. Чтобы использовать пользовательское хранилище Redux для определенных компонентов, создайте пользовательский контекст React с помощью React.createContext() и передайте объект контекста провайдеру React-Redux и определенным компонентам, таким как: . Вы также можете передать параметр {context: MyContext} для подключения

и проходя как context выдает следующую ошибку

Не удалось найти "store" в контексте "Connect(App)". Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему потребителю контекста React в Connect (App) в параметрах соединения.

я не нашел никакой документации, ожидайте, что этот документ истории редуксов здесь расскажет обо всех проблемах и решениях проблемы в response-redux и о том, как их исправил контекст api. но я не уверен, как на самом деле реализовать это в реальном проекте.

кто-нибудь сталкивался с такой же проблемой? или подскажите, пожалуйста, как именно осуществить это изменение.

Спасибо

Answer 1

Я смог решить проблему, фактически послушав, что говорится в сообщении об ошибке.

были две проблемы с моим кодом

1. я проходил store как реквизит для моего <App /> составная часть. вот почему первое предупреждение / сообщение об ошибке пришло.

Передача избыточного хранилища в реквизит была удалена и ничего не делает. Чтобы использовать пользовательское хранилище Redux для определенных компонентов, создайте пользовательский контекст React с помощью React.createContext() и передайте объект контекста провайдеру React-Redux и определенным компонентам, таким как: . Вы также можете передать параметр {context: MyContext} для подключения

чтобы это исправить, просто не проходите мимо redux store как реквизит к любому компоненту

2. мой Provider от react-redux не был корневым компонентом. в сообщении об ошибке сказано

Не удалось найти "store" в контексте "Connect(App)". Либо оберните корневой компонент в поставщике, либо передайте пользовательский поставщик контекста React соответствующему потребителю контекста React в Connect (App) в параметрах подключения.

поэтому я последовал за вторым бредом в предложении

Либо оберните корневой компонент в провайдере, либо передайте пользовательский контекст 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>
);
}
}