Как написать локальный JSON в магазине Redux?

Question

Я хочу записать локальный JSON в магазине Redux.Я делаю что-то не так, потому что массив записан, но я не могу вывести его .map.

Полный массив выводится на консоль, но после карты отображается список без данных.То есть он видит, что количество объектов в массиве, но не выводит данные.

Подскажите, как это правильно сделать?Я также читал, что вы можете использовать fetch даже для локальных файлов json.Что по этому поводу сказать?

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>

Answer 1

Вы определенно можете импортировать файлы JSON, как и вы.

Я думаю, что проблема заключается в обратном вызове вашей карты.Я бы это изменил на:

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