How to fetch .json data from URL?

I have problem with fetching data from URL. When I write data inside of a file, app works great, but when I try to call same data from URL, I get error.

I made a test with small app where everything was inside of a App.js file, and it worked. But new app is kinda devided in multiple files, and this is where problem starts.

Here is events.js where I call data and code works:

import {
 TOGGLE_FAVORITE_EVENT
} from '../const';
import toggle from './toggle';

let data = [
    {
        type: 'PARTY',
        title: 'Party in the Club',
        adress: 'New York',
        date: '9. 9. 2019.',
        image: '',
        text: [
            'Party description...'
        ],
        coordinates: [50, 50],
        id: 'events_1'
    }
];

let events = (state = data, action) => {
    switch(action.type){
        case TOGGLE_FAVORITE_EVENT:
            return toggle(state, action.payload.id);
        default:
            return state;
    }
}

export default events;

This is how I try to fetch data, which doesn’t work:

import {
 TOGGLE_FAVORITE_EVENT
} from '../const';
import toggle from './toggle';

// WP REST API
const REQUEST_URL  = 'http://some-url.com/test.json';

let data = fetch(REQUEST_URL)
            .then(response => response.json() )
            .then(data => console.log(data) )
            .catch(error => console.log(error));

let events = (state = data, action) => {
    switch(action.type){
        case TOGGLE_FAVORITE_EVENT:
            return toggle(state, action.payload.id);
        default:
            return state;
    }
}

export default events;

NOTE: .json file should be fine, becasue it works in small app.

Answer

I think you are trying to initialize the state with the content of a json file loaded from an URL: if I were you, I would create an action specifically to do that. You’ll need a library to handle asynchronous processes, like redux-thunk or redux-saga.
Here is a quick example with redux-thunk:

// store
import thunk from 'redux-thunk'
import { createStore, applyMiddleware } from 'redux'
import reducer from 'state/reducers'

export const configureStore = () => {
  /* thunk is a redux middleware: it lets you call action creators that return a function instead of
  an object. These functions can call dispatch several times (see fetchFavorites) */
  const middlewares = [thunk]
  let store = createStore(reducer, applyMiddleware(...middlewares))
  return store
}  

// actions
// standard action returning an object
export const receiveFavorites = function(response){
  return {
    type: "RECEIVE_FAVORITES",
    response
  }
}

// this action returns a function which receives dispatch in parameter 
export const fetchFavorites = function(){
  return function(dispatch){
    console.log('send request')
    return fetch('http://some-url.com/test.json')
      .then(response => response.json())
      .then(response => {
        dispatch(receiveFavorites(response))
      })
      .catch(error => {
        console.log(error)
      })
  }
}  

Now, with a reducer implemented for the action RECEIVE_FAVORITES, you can call the function fetchFavorites: it will send the request and fill the state however you do it in the reducer.