2
votes

Comment puis-je accéder à un fichier JSON local avec Redux à utiliser dans mon application React?

J'ai une application de réaction utilisant Redux et, à des fins de test, j'ai créé un fichier JSON local qui se trouve dans un dossier appelé data depuis mon application.

J'essaie de transmettre ces données JSON à Redux afin de pouvoir y accéder, puis de les utiliser pour mapper et afficher des éléments dans un composant séparé, mais je ne sais pas comment faire cela. Quelqu'un peut-il fournir des exemples ou des ressources sur la façon de procéder?

javascript reactjs redux

1 commentaires

require ('./ data / thejson.json');

3 Réponses :

3
votes

Comme l'a dit l'utilisateur Sreeram dans les commentaires, vous pouvez directement exiger ou importez le fichier json, après quoi vous y aurez accès comme n'importe quel autre objet.

Cela signifie que vous pouvez l'utiliser pour initialiser votre état dans votre réducteur.

const testData = require('./data/thejson.json');

// use testData as the default argument, which will be used if state is undefined (as it will be when the app starts 
function someReducer(state = testData , action) {
  switch (action.type) {
    // some code here.. 
  }
}

1 commentaires

import testData depuis "./data/thejson.json" fonctionne également si vous préférez cette syntaxe.

3
votes

Ajoutez ce json à l'état initial du magasin. Ainsi, chaque fois que votre application démarre, elle définit l'état initial à partir du json, puis utilise peut l'utiliser n'importe où dans votre application.

createStore(reducer,  require('your file path')

0 commentaires

1
votes

Vos données sont-elles destinées au développement? ou va-t-il être inclus dans la production?
Gardez à l'esprit la taille du json

Si vous utilisez Typescript au moins à 2,9, vous pouvez définir: "resolutionJsonModule": true, flag. puis importez-le:

import data from 'path/to/data.json';

Si vous utilisez webpack, depuis la version 2, webpack inclut json-loader

import data from 'path/to/data.json';

Vous pouvez également le servir, je ne m'en souviens pas bien, mais il existe un moyen de servir du contenu statique avec le serveur de développement Webpack, qui utilise une application express sous le capot qui peut être configurée et que vous pouvez ensuite récupérer. J'espère que cela vous aidera.

0 commentaires