Propriétés de la carte d'état à réagir-redux
J'ai un composant qui utilise state
pour fournir des données à l'utilisateur. Par exemple <div>this.state.variableInState</div>
. Ce composant peut envoyer une méthode (par exemple sur onClick
action). Je suis actuellement à l'aide react-redux
un connect
méthode pour cartographier store
à props
. Est il possible que je peux setState
après l'envoi?
//actions
export function executeAction() {
return function (dispatch, getState) {
dispatch({
type: 'MY_ACTION',
payload: axios.get('/some/url')
});
};
}
//reducer
export default function (state = {}, action) {
switch (action.type) {
case 'MY_ACTION_FULFILLED':
return {...state, myVariable: action.payload.data}
}
}
//component
class MyComponent extends Component {
render() {
(<div onClick={this.props.executeAction.bind(this)}>
{this.state.variableInState}
</div>)
}
someOtherMethod() {
//I want to operate with state here, not with props
//that's why my div gets state from this.state instead of this.props
this.setState({variableInState: 'someValue'})
}
}
export default connect((state, ownProperties) => {
return {
//So I want to change MyComponent.state.variableInState here
//but this method updates MyComponent props only
//What can I do?
variableInProps: state.myVariable
}
}, {executeAction})(MyComponent);
Vous devez vous connecter pour publier un commentaire.
Ce que je comprends, tout ce que vous voulez faire est de convertir le composant d'accessoires pour la composante propre état. Vous pouvez toujours modifier le composant d'accessoires à l'état du composant dans le
componentWillReceiveProps
cycle de vie de la méthode des composants de ce genre.componentWillReceiveProps
méthode est toujours exécuté par réagir chaque fois qu'un nouveau accessoires est à venir pour composant, donc c'est le bon endroit pour mettre à jour votre état du composant en fonction de vos accessoires.Mise à JOUR :
La
componentWillReceiveProps
a été désapprouvée. Ainsi, au lieu de cette méthode, vous pouvez utilisercomponentDidUpdate
méthode pour ce faire.componentDidUpdate
méthode prend précédente, des accessoires et de l'état antérieur en tant qu'arguments. Ainsi, vous pouvez vérifier pour le changement dans les accessoires et puis définissez l'état.componentWillReceiveProps
est déjà obsolète, vous pouvez utilisercomponentDidUpdate
au lieu de cela,Je pense que vous n'êtes pas censé modifier directement l'état de ce genre. pourquoi ne pas en appeler une autre action à effectuer ce que vous voulez?
L'état devrait être immuable lors de l'utilisation de Redux. Vous devez envoyer une action. Un Réducteur doit recevoir l'action et l'état actuel, et renvoyer un nouvel objet de l'état qui inclut les modifications que vous souhaitez apporter.
Vérifiez ceci: http://redux.js.org/docs/introduction/ThreePrinciples.html#changes-are-made-with-pure-functions
Sûr que vous pouvez, onClick lier à une fonction comme ceci:
Alors définir ce myfuntion être:
Ici setState changements composant natif de l'état, et de l'appel de l'action va changer redux état si donc défini par un réducteur. Ces membres sont indépendants.
Connecter wrapper (premier argument) les cartes de l'état pour les accessoires (redux état de réagir d'accessoires, pas de composant de l'état lui-même.
Bonne question est pourquoi vous avez besoin, assurez-vous il y a quelques exemples où cela pourrait être utile...
En général, si vous avez besoin de l'état qui est nécessaire à l'échelle mondiale puis utilisez redux de l'état (qui s'applique facilement à tous les composants) et, pour certains états locaux utilisation réagir état natif. (Par exemple, lorsque vous la construction de certains composants de l'interface utilisateur, comme la coutume case)
Il y a aussi statique getDerivedStateFromProps: