web-dev-qa-db-fra.com

comment implémenter le nouveau react-redux v6.0.0

j'essayais de migrer react-reduxv5.X.X vers v6.0.0 et il semble y avoir aucune documentation à ce sujet. J'utilise les versions suivantes: "react": "^16.4.2""redux": "^4.0.0""react-redux": "^6.0.0"

le journal officiel des changements dit. 

Le passage de magasin en tant que support à un composant connecté n'est plus pris en charge. Au lieu de cela, vous pouvez passer un prop personnalisé context = {MyContext} à et. Vous pouvez également passer {context: MyContext} en tant qu'option pour vous connecter . le lien est ici

voici ma racine 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'));

voici mon app.jsx (composant racine)

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);

selon le journal des modifications, j'ai créé context et l'ai transmise au fournisseur

 const storeContext = React.createContext(reduxStore);

voici ma fonction render après ce changement 

  render() {
    const { store, profile, history } = this.props;
    return (
      <main className="app-wrapper">
        <Provider context={storeContext}>
          <ConnectedRouter history={history}>
            <Layout user={profile} />
          </ConnectedRouter>
        </Provider>
      </main>
    );
  }

passer store comme props à provider donne l'erreur suivante 

Passer le magasin de redux dans les accessoires a été supprimé et ne fait rien. Pour utiliser un magasin Redux personnalisé pour des composants spécifiques, créez un contexte React personnalisé avec React.createContext (), puis transmettez l'objet de contexte au fournisseur de React-Redux et à des composants spécifiques tels que:. Vous pouvez également passer une option {context: MyContext} pour vous connecter

et passer comme context donne l'erreur suivante

Impossible de trouver "magasin" dans le contexte de "Connect (App)". Enveloppez le composant racine dans un fichier ou passez un fournisseur de contexte React personnalisé et le consommateur de contexte React correspondant à Connect (App) dans les options de connexion.

je n'ai trouvé aucune documentation, mais attendez-vous à ce document d'historique de redux ici il indique tous les problèmes et solutions pour le problème dans react-redux et comment l'API de contexte l'a corrigé. mais je ne sais pas comment le mettre en œuvre dans un projet réel. 

quelqu'un at-il affronté le même problème? ou pouvez-vous s'il vous plaît me dire comment exactement mettre en œuvre ce changement. 

merci 

javascriptreactjsreact-reduxreact-context
4
hannad rehman

J'ai pu résoudre le problème en écoutant ce que disait le message d'erreur. 

il y avait deux problèmes avec mon code

  1. je passais store comme accessoire à mon composant <App />. C’est pourquoi le premier message d’avertissement/erreur est arrivé. 

Passer le magasin de redux dans les accessoires a été supprimé et ne fait rien. Pour utiliser un magasin Redux personnalisé pour des composants spécifiques, créez un contexte React personnalisé avec React.createContext () et transmettez l'objet de contexte au fournisseur de React-Redux et à des composants spécifiques tels que:. Vous pouvez également passer une option {context: MyContext} pour vous connecter

pour résoudre ce problème, ne passez simplement pas le redux store entier comme accessoire à un composant 

  1. mon Provider de react-redux n'était pas le composant racine. le message d'erreur dit 

Impossible de trouver "magasin" dans le contexte de "Connect (App)". Soit enveloppé composant racine dans un fournisseur, ou transmettez un fournisseur de contexte React personnalisé à et le consommateur de contexte React correspondant à Connect (App) dans connecter les options

donc j'ai suivi la deuxième phrase dans la phrase

Enveloppez le composant racine dans un fournisseur ou transmettez un contexte de réaction personnalisé 

donc j'ai enveloppé ma racine principale dans le fournisseur. et les choses ont commencé à bien fonctionner. 

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

J'ai eu le même problème et voici comment je l'ai résolu.

const MyContext = React.createContext();

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