How to make a request to the server in an action and store the value?

Question

React

Greetings) I'm learning react / redux, and I'm completely confused (((
There is a CatalogAction.js

//action
const getProducts = id => {
  console.log(id); // выводит id
  return dispatch => {
    dispatch({
      type: GET_PRODUCTS_REQUEST,
      payload: {
        wait: true
      }
    });
  };
};

How in this case to make a request to the server in the action (getProducts) at the address (id + ".json") ? And write the response (i.e. the object that comes from the server) to (type: GET_PRODUCTS_SUCCESS) to update the store?

dispatch({
      type: GET_PRODUCTS_SUCCESS,
      payload: {
        wait: true
        product: data // ответ от сервера записать сюда
      }

catalogR.js reducer

const initialState = {
  wait: false,
  products: {
    a: "апельсин",
    b: "яблоко",
    c: "банан"
  }
};

export function catalogR(state = initialState, action) {
  switch (action.type) {
    case GET_PRODUCTS_REQUEST:
      return {
        ...state,
        wait: action.payload.wait
      };
    case GET_PRODUCTS_SUCCESS:
      return {
        ...state,
        wait: action.payload.wait,
        products: action.payload.products
      };
    default:
      return state;
  }
}

store.js

import { createStore, applyMiddleware } from "redux";
import { rootReducer } from "../reducers/rootReducer";
import thunk from "redux-thunk";
import logger from "redux-logger";

export const store = createStore(rootReducer, applyMiddleware(thunk, logger));

CatalogNavContainer.js

import React, { Component } from "react";
import { connect } from "react-redux";
import CatalogNav from "../../components/content/CatalogPage/Catalog/CatalogNav/CatalogNav";
import getProducts from "../../actions/CatalogAction";

class CatalogNavContainer extends Component {
  render() {
    return (
      <div className="CatalogNavContainer">
        <CatalogNav getProducts={this.props.getProducts} />
      </div>
    );
  }
}

// приклеиваем данные из store
const mapStateToProps = store => {
  return {
    c: null
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getProducts: year => dispatch(getProducts(year))
  };
};

// в наш компонент App, с помощью connect(mapStateToProps)
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CatalogNavContainer);

Answer 1

const getProducts = id => {
  console.log(id); // выводит id
  dispatch({
      type: GET_PRODUCTS_REQUEST,
      payload: {
      wait: true
    }
  });
  return dispatch => {
    fetch(`/backend/${id}.json`)
      .then(
        response => dispatch({
          type: GET_PRODUCTS_SUCCESS,
          payload: {
            wait: false,
            products: response.json()
          }
        })
      )
  };
};

Answer 2

In order for props to come, you need to pass it to mapStateToProps, you have null passed there.