通过 AJAX 请求设置状态，使用 redux-thunk答案

【问题标题】：Setting state with AJAX requests,using redux-thunk通过 AJAX 请求设置状态，使用 redux-thunk
【发布时间】：2017-04-24 18:12:43
【问题描述】：

我正在使用 redux-thunk 并尝试从随机 API 获取数据，但我遇到了一个问题：正如您在我的控制台屏幕截图中看到的那样，当控制台记录用户数据时，我得到了 2 次空数组，这真的很糟糕。好像我做错了什么。我该如何进行请求以使其不记录空数组？在 componentWillMount 中请求数据会产生相同的结果。

商店：

  const initialState = {
  users: {
    isFetching: false,
    receivedAt: null,
    error: null,
    userList: []
  }
}

const store = createStore(
  rootReducer,
  initialState,
  applyMiddleware(
    thunk,
    createLogger()
  )
)

减速器：

function users(state = {},action) {
  switch(action.type) {

    case 'REQUEST_USERS':
    return {
      ...state,
      isFetching:true
    }

    case 'RECEIVE_USERS':
    return {
      ...state,
      isFetching: false,
      receivedAt: action.receivedAt,
      userList: action.users
    }
    case 'REQUEST_ERROR':
    return {
      ...state,
      error: action.err
    }

    default: return state
  }
}

const rootReducer = combineReducers({
  users
})

ActionCreators：

export function requestUsers() {
  return {
    type:'REQUEST_USERS'
  }
}

function receiveUsers(users) {
  return {
    type:'RECEIVE_USERS',
    users: users.results,
    receivedAt: Date.now()
  }
}

function requestError(err) {
  return {
    type:'REQUEST_ERROR',
    err
  }
}

export function loadUsers () {
  return dispatch => {
    dispatch(requestUsers())
    return fetch('https://randomuser.me/api/?results=50')
    .then(response => response.json())
    .then(users => dispatch(receiveUsers(users)))
    .catch(err => dispatch(requestError(err)))
  }
}

容器代码：

function mapStateToProps (state) {
  return {
    users: state.users
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}

const App = connect(mapStateToProps, mapDispatchToProps)(Main)

我的组件代码：

componentDidMount() {
    this.props.loadUsers()
  }

  render() {
    const {userList} = this.props.users
    console.log(userList)
    const users = userList.map((user,i) => <li key={i}>{user.name.first + ' ' + user.name.last}</li>)
    return (
      <div>
        <ul>
          {users}
        </ul>
      </div>
    )
  }
}

【问题讨论】：

如果没有看到更多代码（reducers、如何连接到商店等）真的很难说，请缩进代码，这让我很头疼
已添加到帖子中。我连接到商店，使用 connect(mapStatetoProps,mapDispatchToProps)(Main)
对不起，我不知道如何在此处缩进代码，粘贴时它会丢失所有缩进。
因为它是一个最小的应用程序，你最好在这里发布整个内容 - 尝试为每个缩进级别插入 4 个空格
我终于知道如何缩进这里的代码了，万岁！添加了整个内容。

标签： ajax reactjs redux react-redux redux-thunk

【解决方案1】：

我想我想通了。渲染函数只被调用了两次 - 在安装和状态更改时，所以我在控制台中看到这可能是正常的。

是的，你是对的。只有当 AJAX 请求返回时，它才会真正将商品添加到商店中。

您可以在某些情况下（例如创建/更新）预测服务器响应是什么。在这种情况下，您可以将预测结果添加到 REQUEST_USERS 操作的有效负载中，并获得更快的 UI。

【讨论】：