在React操作中解析JSON响应数据

Question

我正在调用我的服务器从第三方API（Yelp）获取一些json数据。我正在使用axios和redux-promise在redux中设置状态，所以我可以在反应中使用它。返回的数据令我感到困惑。

我想将状态设置为从Yelp API返回的业务数据数组。目前，如果我将基本字符串作为有效负载传递，则此操作有效。我不确定如何从api响应中获取此JSON数据，然后在redux状态的反应中对其进行操作。

这是数据的样子

这是我的动作js文件

import axios from 'axios';

export const ZIP_CODE = 'ZIP_CODE';

const ROOT_URL = 'http://www.localhost:3000/v1/location/1/1/2/4000'


function getBusinesses(json) {  
    const business_data = json['data']['businesses']
    console.log(business_data)
    return business_data;
}


/*
 * Updates the users location
*/
export function updateZip(zipCode) {

    const request = axios.get(ROOT_URL)
    .then(getBusinesses)

    return {
        type: ZIP_CODE,
        payload: request
    }
}

Answer 1

我找到了一个解决方案，我的解决方案涉及一些尴尬的修补和修复我的错误。

修复1 - 更新商店

我添加了thunk并且效果很好

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(reducers, composeEnhancers(
    applyMiddleware(ReduxThunk)
  ));

修复2 - 将thunk整合到行动中

我在一个初始函数中解析了json，然后将它返回到被发送到reducer的动作

import axios from 'axios';

export const ZIP_CODE = 'ZIP_CODE';

const ROOT_URL = 'http://www.localhost:3000/v1/location/1/1/2/4000'

function getBusinesses(res) {   

    return {
        type: ZIP_CODE,
        payload: res['data']['businesses']
    }
}

export function updateZip(zipCode) {
  return function(dispatch) {
    axios.get(ROOT_URL)
      .then((response) => {
        dispatch(getBusinesses(response))
      })
  }
}