使用redux-thunk使用AJAX请求设置状态

Question

我正在玩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>
    )
  }
}

Answer 1

  

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

是的，你是对的。只有当AJAX请求返回时，它才会将项目实际添加到商店。

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