Question

我尝试将Axios与Redux reducer一起使用，并尝试将响应保存到状态以便可以将其打印出来，但是当我尝试将图像打印到页面时，它返回typeError：状态未定义。我可以用console.log记录响应，但无法弄清楚如何保存它或使其正常工作。 View picture

<span id="second-span"></span>

<script>
  function cycleArr (elm, arr, int) {
    const next = (idx => arr => idx = ++idx % arr.length)(-1)

    function* getItems (arr) {
      for (;;) yield arr[next(arr)]
    }

    +function cycle (out, items, int) {
      out.textContent = items.next().value
      setTimeout(cycle, int, out, items, int)
    }(elm, getItems(arr), int)
  }

  let arr = [
    'Creator',
    'Foodie',
    'Traveller',
    'Fitness Freak',
    'Makeup Genie',
    'Vlogger',
    'Filmmaker',
    'Artist',
    'Narrator'
  ]
  let int = 1 * 1000 // Every 1 sec.
  let elm = document.querySelector('#second-span')

  cycleArr(elm, arr, int)
</script>

编辑：这是分配和映射状态的位置：

import Axios from 'axios';
const initState = {
    some: '',
    cat: '',
}
const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'GET_NEW_CAT':
        Axios.get('http://aws.random.cat/meow')
        .then((response) => {
            console.log(response.data.file)
           return state.cat = response.data.file
        }) 
        .catch((err) => console.log(err));
        break;
        default:
            return state;
    }
}
export default reducer;

Answer 1

错误提示状态未定义。这意味着您的组件显然未连接到状态。

您在这里缺少几个步骤。

创建全局减速器。选中combineReducers
使用react-redux中的提供者在您的应用中传递状态。

Answer 2

您正在使用此行更改状态：

return state.cat = response.data.file

When working with redux, state is immutable，因此您可以使用副本来更新状态。因此，您可以如下使用Object.assign：

return Object.assign({}, state, { cat: response.data.file })

或更优雅地说，点差运算符：

return { ...state, cat: response.data.file }

另外，Redux documentation包含一些食谱，描述了如何在各种情况下使用不可变状态。

尝试将Axios与Redux Reducer一起使用...返回状态未定义

2 个答案: