1
votes

Changer le stockage dans Redux

J'ai besoin de changer l'état "global" de Redux (je crois que cela s'appelle stockage). Voici mon code:

reducer

export default class App extends Component {
    constructor(p) {
        super(p);
        this.state = {user: null};
    }

    setUser = () => {
        const {uid} = firebase.auth().currentUser;
        firebase.database().ref('Users').child(uid).on('value', r => {
            const user = r.val();
            this.setState({user: user});
            console.log(this.state.user);
            setUser(this.state.user);
        });
    };

    componentWillMount() {
        if (firebase.auth().currentUser) {
            this.setUser();
        }
        firebase.auth().onAuthStateChanged(async () => {
            console.log('authChanged');
            if (!firebase.auth().currentUser) {
                return null;
            }
            this.setUser();
        });
    }


    render() {
        return (
            <div className="App">
                <Nav/>
            </div>
        );
    }
}

Action:

const user = {test:true};
setUser(this.state.user);

Appel de l'action:

XXX

Mais si j'exécute ce code, il échoue et n'appelle pas le réducteur. Il appelle l'action, mais pas le réducteur. Que me manque-t-il?

Mon code app.js actuel:

export const setUser = (user = {}) => {
    console.log(user);
    return {
        type: C.SET_USER,
        payload: user,
    }
};

javascript reactjs react-redux redux

8 commentaires

Partagez le code qui connecte l'état et les accessoires du composant à l'aide de redux. Je pense que vous avez raté l'appel à l'action via la fonction d'accessoires.

où est votre état? vous appelez setUser (données de l'état) , pouvez-vous nous montrer l'état, ou vous avez passé un mauvais utilisateur? à la place const user = {test: true}; vous en appelez de l'état (peut-être indéfini)

@kumark Vous avez raison. Mon composant parent est toujours sous la forme "React". Mais j'ai besoin de l'élément ComponentWillMount pour que l'application fonctionne. Y a-t-il un remplacement pour cela dans Redux?

@ ivica.moke La console n'enregistre rien. Il n'est pas appelé

l'avez-vous expédié?

Non, je vais joindre le code

import {someAction} depuis './my-action-folder' dans votre composant this.props.someAction () export default connect (null, {someAction} ) (votreComposant);

@ ivica.moke J'ai joint le code. Le problème est que je dois utiliser l'écouteur ComponentWillMount . Puis-je l'utiliser avec Redux d'une manière ou d'une autre?

3 Réponses :

1
votes

setUser doit être distribué et pas simplement appelé:

import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
  // ...
  someMethod() {
    this.props.setUser(user);
  }
}
export default connect(
  null,
  ({setUser: setUser})
)(UserComponent);

Mais ce n'est pas vraiment la manière de réagir , vous feriez mieux d'utiliser mapDispatchToProps dans votre connect pour distribuer les actions directement depuis le composant accessoires. Quelque chose comme:

store.dispatch(setUser(user));

Cela permet à votre composant React d'être lié à votre boutique Redux de manière optimisée et sans bogue. C'est également la manière dont la plupart des développeurs l'utilisent, vous trouverez donc probablement de nombreux documents à ce sujet.

1 commentaires

Le store.dispatch (setUser (utilisateur)); a fonctionné pour moi. La version la plus correcte n'a pas cependant.

1
votes

Exemple: votre composant connecté sur lequel vous souhaitez utiliser votre action setUser avec redux

 import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { setUser} from '../../actions';

    class YourComponent extends Component {
     render(){
      // now your redux action is passed to component as prop
      // and you can use it like
     this.props.setUser(some-user);
      return()
     }

}

export default connect(null, {setUser})(YourComponent);

0 commentaires

1
votes

tout d'abord vous devez envoyer une action pour changer l'état, ensuite vous devez connecter votre composant au magasin

pour connecter votre composant au magasin

this.props.dispatch(setUser());

lorsque vous connectez votre composant au magasin, vous aurez accès à la fonction dispatch dans l'action props

pour expédier, procédez comme suit:

...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
     ...
}

export default connect((store) => ({...}))

Je crois que cela s'appelle le stockage

BTW il a appelé magasin

0 commentaires