4
votes

react-admin: action de distribution pour stocker les métadonnées de la requête dynamique

Bonjour, cette question est de continuer à celle-ci !

J'obtiens mes itinéraires de manière dynamique via une requête ajax (après cet article dans la documentation officielle «Déclarer des ressources au moment de l'exécution»), j'utilise une fonction async pour renvoyer une liste de ressources à partir d'une requête ajax.

Quelle est la meilleure façon de distribuer une action pour stocker des métadonnées, que j'ai reçues sous forme de requête ajax dans redux, pour un accès ultérieur?

De plus, lorsque l'utilisateur ne s'est pas encore connecté, cette fonction ne retournera rien, après la connexion, l'utilisateur aura accès à quelques ressources. Quelle est la meilleure façon de recharger les ressources?

javascript reactjs react-redux react-admin redux

0 commentaires

3 Réponses :

0
votes

Pour que cela fonctionne, j'ai ajouté une variable privée, dans laquelle je stocke les données mentionnées dans la question, et j'y accède via une autre fonction, que j'ai exportée à partir de ce fichier.

Cela me donne ce dont j'ai besoin, mais je ne sais pas si c'est la meilleure façon de procéder.

2 commentaires

Pouvez-vous montrer du code pour cela? J'essaie de faire quelque chose de similaire mais j'ai créé des composants supplémentaires pour passer les appels

Lorsque j'obtiens la réponse de l'API, la première chose que je fais est de la stocker dans cette variable. C'est juste une variable locale, qui est également exportée à partir de ce fichier.

0
votes

La meilleure option est d'utiliser redux-saga . https://redux-saga.js.org/docs/introduction/BeginnerTutorial. html

Alors

export function* async() {
  yield fetch(); //your Ajax call function
  yield put({ type: 'INCREMENT' }) //call your action to update your app
}

Si vous ne pouvez pas utiliser redux-saga, j'aime votre solution avec une variable privée. Vous devriez continuer avec cela.

4 commentaires

Merci pour votre réponse, ma question est pour une situation spécifique, dans react-admin. Pouvez-vous l'examiner? ta réponse est bien trop générale

@Developerium en regardant certains des fichiers de react-admin, je peux voir qu'ils utilisent également redux-saga uniquement. Vérifiez ceci: github.com/marmelab/react-admin/blob/master/packages/ra-core‌ /…

@Developerium, il s'agit d'un problème général avec redux, redux-saga a été introduit pour résoudre ce type de problèmes. J'ai rencontré le même problème avec mon application React-native, c'est pourquoi j'ai décidé d'utiliser redux-saga .

J'ai essayé ça, mais je n'ai rien eu dans mon réducteur

-1
votes

https://github.com/redux-utilities/redux-actions

redux-actions est vraiment simple à configurer. Configurez le magasin et vous pourrez ensuite configurer chaque valeur d'état dans un seul fichier:

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class MyComponent extends React.Component {
  render = () => (
    <span>{this.props.myValue}</span>
  )
}

MyComponent.propTypes = {
  myValue: PropTypes.string.isRequired
}

const mapStateToProps = (state) => ({
  myValue: state.myState.myValue
})

const mapDispatchToProps = () => ({})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Ensuite, dans votre composant, vous venez de vous connecter et vous pouvez accéder à la valeur de l'état

import { createAction, handleActions } from 'redux-actions'

let initialState = { myValue: '' }

export default handleActions({
  SET_MY_VALUE: (state, action) => ({...state, myValue: action.payload})
})

export const setMyValue = createAction('SET_MY_VALUE')

export const doSomething = () => {
  return dispatch => {
    doFetch().then(result => {
      if (result.ok) dispatch(setMyValue(result.data))
    })
  }
}

1 commentaires

Cette fonction n'est pas dans le contexte d'un composant, une simple fonction en dehors de tout composant