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

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
})

动作创作者：

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

I guess I figured it out. Render function is just called two times - upon mounting and upon state change, so it's probably normal what i see this in the console.

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

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

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

Setting state with AJAX requests,using redux-thunk

ajax

reactjs

redux

react-redux

redux-thunk