Как сделать запрос на сервер в action и сохранить значение?

Question

[qfrontend]

Приветствую) Изучаю react/redux, и совсем запуталась(((
Есть CatalogAction.js

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

Как в данном случае сделать запрос на сервер в action (getProducts) по адресу (id + ".json")? И ответ (т.е объект который придёт от сервера) записать в (type: GET_PRODUCTS_SUCCESS), что бы обновить store?

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

редюсер catalogR.js

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()
          }
        })
      )
  };
};

Comments

[qfrontend]

Спасибо :)
В этом случае products: Promise { : Array(3) }
Как вытащить данные из промиса?

[Леонид]

qfrontend,

class CatalogNavContainer extends Component {

  componentDidMount() {
    const { year,  getProducts } = this.props;
    getProducts(year);
  }

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

Answer 2

[Gabda96]

Чтобы пришел props, надо в mapStateToProps его передать, у вас там передается null.

Comments

[qfrontend]

Этот пропс должен придти в другой компонент.

[qfrontend]

Нужно обновить store