热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

如何使用Redux从服务器获取数据?

如何解决《如何使用Redux从服务器获取数据?》经验,为你挑选了1个好方法。

我需要借助Redux之类的工具从服务器获取数据。我看了一些有关它的教程,并为此编写了一些代码。这里是:

actions / fetching_actions.js

import * as Actions from '../constants/action_types';

function fetchListOfCities() {
  return fetch(`${Actions.BASE_URL}/data/2.5/find?lat=55.5&lon=37.5&cnt=10&appid=8df903ce56f6d18245e72f380beb297d`);
}

export const listOfCitiesRequest = () => function (dispatch) {
  return fetchListOfCities()
    .then(list => list.json())
    .then((list) => {
      dispatch(getListOfCities(list));
    }).catch((error) => {
      console.log(error);
    });
};

export const getListOfCities = result => ({
  type: Actions.LIST_RESPONSE,
  result,
});

常量/action_types.js

export const BASE_URL = 'http://api.openweathermap.org';

export const LIST_RESPOnSE= 'LIST_RESPONSE';

export const CITY_RESPOnSE= 'CITY_RESPONSE';

reducers / fetching_reducer.js

import * as Actions from '../constants/action_types';

const initialState = {
  list: [],
  city: {},
};

const FETCHING_REDUCER = (state = initialState, action) => {
  switch (action.type) {
    case Actions.LIST_RESPONSE:
      return {
        ...state,
        list: action.result,
      };
    case Actions.CITY_RESPONSE:
      return {
        ...state,
        city: action.result,
      };
    default:
      return state;
  }
};

export default FETCHING_REDUCER;

reducers / index.js

import * as Actions from '../constants/action_types';

const initialState = {
  list: [],
  city: {},
};

const FETCHING_REDUCER = (state = initialState, action) => {
  switch (action.type) {
    case Actions.LIST_RESPONSE:
      return {
        ...state,
        list: action.result,
      };
    case Actions.CITY_RESPONSE:
      return {
        ...state,
        city: action.result,
      };
    default:
      return state;
  }
};

export default FETCHING_REDUCER;

不幸的是,我不知道该怎么做。在组件中以这种方式获取数据之前:

getCitiesListFromApiAsync = async () => {
     const fetchData = await fetch('http://api.openweathermap.org/data/2.5/find?lat=55.5&lon=37.5&cnt=10&appid=8df903ce56f6d18245e72f380beb297d').then();
     const data = await fetchData.json();

     if (data.cod !== '200') {
       Alert.alert('Loading failed');
     } else {
       this.setState({ data });
     }
   };

但是我听说最好通过redux来获取数据,所以,请您能解释一下如何完成此获取部分,我应该在这里添加什么?



1> sachin babu..:

在佐贺中,请导入这些东西

import {  put } from 'redux-saga/effects';

getCitiesListFromApiAsync = async () => {
     const fetchData = await fetch('http://api.openweathermap.org/data/2.5/find?lat=55.5&lon=37.5&cnt=10&appid=8df903ce56f6d18245e72f380beb297d').then();
     const data = await fetchData.json();

     if (data.cod !== '200') {
       Alert.alert('Loading failed');
     } else {
       yield put({ type: LIST_RESPONSE, payload: data });
     }
   };

在减速器中

  switch (action.type) {
    case Actions.LIST_RESPONSE:
      return {
        ...state,
        list: action.payload,
      };


推荐阅读
author-avatar
清潇静凌
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有