Как получить данные через api в redux?

Ответ 1

JSfiddle; http://jsfiddle.net/cdagli/b2uq8704/6/

Он использует редукцию, редукцию и выборку.

Методы извлечения;

function fetchPostsWithRedux() {
    return (dispatch) => {
    dispatch(fetchPostsRequest());
    return fetchPosts().then(([response, json]) =>{
        if(response.status === 200){
        dispatch(fetchPostsSuccess(json))
      }
      else{
        dispatch(fetchPostsError())
      }
    })
  }
}

function fetchPosts() {
  const URL = "https://jsonplaceholder.typicode.com/posts";
  return fetch(URL, { method: 'GET'})
     .then( response => Promise.all([response, response.json()]));
}

Действия, использованные выше:

(Примечание. Вы можете определить множество действий, например, fetchPostRequest может использоваться для отображения индикатора загрузки. Или вы можете отправлять различные действия в случае разных кодов состояния HTTP.)

function fetchPostsRequest(){
  return {
    type: "FETCH_REQUEST"
  }
}

function fetchPostsSuccess(payload) {
  return {
    type: "FETCH_SUCCESS",
    payload
  }
}

function fetchPostsError() {
  return {
    type: "FETCH_ERROR"
  }
}

И в вашем редукторе вы можете загружать сообщения в состояние;

const reducer = (state = {}, action) => {
  switch (action.type) {
    case "FETCH_REQUEST":
      return state;
    case "FETCH_SUCCESS": 
      return {...state, posts: action.payload};
    default:
      return state;
  }
} 

Вы можете получить доступ к состоянию и действиям внутри вашего компонента после их подключения;

connect(mapStateToProps, {fetchPostsWithRedux})(App);

Ответ 2

Создайте действие, в котором вы выполняете запрос к вашему API. Вы можете использовать библиотеку, такую ​​как axios или fetch, которые возвращают обещание.

действия/index.js:

import axios from 'axios';

export const FETCH_SOMETHING= 'FETCH_SOMETHING;
const ROOT_URL = 'http://api.youapi.com';

export function fetchWeather(city) {

    const url = `${ROOT_URL}&q=${aParamYouMayNeed}`;
    const request = axios.get(url);

    return {
        type: FETCH_SOMETHING,
        payload: request
    };
}

Затем в редукторе уничтожайте результат обещания после его разрешения следующим образом:

редукторы/reducer_something.js:

import { FETCH_SOMETHING} from '../actions/index';

export default function(state = [], action) {
    switch (action.type) {
        case FETCH_SOMETHING:
        return [ action.payload.data, ...state ];
    }

    return state;
}

Код, заимствованный у Стивена Гридера. Это его репо: https://github.com/StephenGrider/ReduxCasts/tree/master/weather/src