How to write a local json in store redux?

Question

I want to record a local json in store redux. I do something wrong, because the array is written but I can not get it out .map.

A full array is output to the console, but a list is displayed after the Map without data. That is, he sees that the number of objects in the array, but does not output the data.

Tell me how to do it right? I also read that you can use fetch even for local json files. What about this say?

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import Clients from './clients.json'; // This is json file

import App from './App';
import registerServiceWorker from './registerServiceWorker';

function clients(state = Clients) { // Clients is array data
    return state
}

const store = createStore(clients); // This is reducers

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

// App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class App extends Component {

  render() {
    console.log(this.props.testStore); // full array
    return (
      <div className="App">
        <ul>
            {this.props.testStore.map((general, index) =>
              <li key={index}>{general.firstName}</li> 
            )}
        </ul> 
      </div>
    );
  }
}

export default connect(
    state => ({
        testStore: state
    }),
    dispatch => ({})
)(App);

// clients.json

[
  {
    "general": {
      "firstName": "Liana",
      "lastName": "Crooks",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Ledner, Johnson and Predovic",
      "title": "Investor Functionality Coordinator"
    },
    "contact": {
      "email": "Gerry_Hackett77@gmail.com",
      "phone": "(895) 984-0132"
    },
    "address": {
      "street": "1520 Zemlak Cove",
      "city": "New Devon",
      "zipCode": "42586-7898",
      "country": "Guinea-Bissau"
    }
  },
  {
    "general": {
      "firstName": "Deontae",
      "lastName": "Dare",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"
    },
    "job": {
      "company": "D'Amore, Dicki and Borer",
      "title": "International Applications Consultant"
    },
    "contact": {
      "email": "Kellie.Marvin38@yahoo.com",
      "phone": "1-615-843-3426 x600"
    },
    "address": {
      "street": "65901 Glover Terrace",
      "city": "Alden ton",
      "zipCode": "57744-4248",
      "country": "Kenya"
    }
  },
  {
    "general": {
      "firstName": "Cortez",
      "lastName": "Pacocha",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/holdenweb/128.jpg"
    },
    "job": {
      "company": "McKenzie Group",
      "title": "Forward Branding Developer"
    },
    "contact": {
      "email": "Sage_Wiegand@hotmail.com",
      "phone": "725.583.0926 x0430"
    },
    "address": {
      "street": "376 Reginald Dam",
      "city": "Port Enid fort",
      "zipCode": "51294-8361",
      "country": "Belarus"
    }
  }
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

@Caffeinated.tech of course. I added. Help please understand — max, Sep 28 '18 at 11:39
OK, so it's just a plain json file. I don't think you can import those via `import` without some sort of pre-processor. See this [question and answers](https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6) — caffeinated.tech, Sep 28 '18 at 11:59

score 0 · Accepted Answer · answered Sep 28 '18 at 12:19

0

You can definitely import json files as you have.

I think the problem lies in your map callback. I would it change to:

<ul>
  {this.props.testStore.map((arrayItem, index) =>
    <li key={index}>{arrayItem.general.firstName}</li> 
  )}
</ul>

answered Sep 28 '18 at 12:19

twils0

2,431
2
12
24

And where will receive data `arrayItem`? – max Sep 28 '18 at 14:21
Your JSON array has several objects, or "arrayItems", contained in an array. The key "general" exists on each of these objects. You were mapping the array as if "general" were the object itself; it is not. Instead, you should map through the array, and for each "arrayItem" (or object), you can select the "general" key using "arrayItem.general". – twils0 Sep 28 '18 at 16:39
and I can get data using the `fetch` (XHR) – max Sep 30 '18 at 11:10

How to write a local json in store redux?

1 Answers1