как внедрить новый response-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"

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

Передача хранилища в качестве реквизита для подключенного компонента больше не поддерживается.Вместо этого вы можете передать пользовательский контекст 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 (приложение)".Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему потребителю контекста React в Connect (App) в параметрах соединения.

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

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

спасибо

Answer 1

У меня была такая же проблема, и вот как я ее решил.

const MyContext = React.createContext();

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

Answer 2

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

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

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

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

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

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

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

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

Либо оберните корневой компонент в провайдере, либо передайте пользовательский контекст React

, чтобы я обернул свой основной корень в провайдере.и все стало хорошо работать.

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