Question

我是Redux的初学者。我正在尝试获取用户列表，但是当我在reducer函数中调用console.log（action.payload）时，它显示未定义。

const URL = 'http://localhost:3001/api/'

export function fetchUsers() {
  return (dispatch) => {
    dispatch(fetchUserRequest());
    return axios.get(`${URL}userdata`)
      .then(response => response.json())
      .then(userlist => fetchedUsersSuccessfully(userlist.data))

  }
}

export function fetchUserRequest() {
  return {
    type: 'FETCH_REQUEST',
  }
}
export function fetchedUsersSuccessfully(users) {
  return {
    type: 'FETCH_USERS',
    payload: users
  }
}

这是我的减速机

export function users(state = InitialState, action) {
  console.log(action.payload)
  switch (action.type) {
    case FETCH_USERS:
      return [...state, action.payload]
    default:
      return state;
  }

}

Answer 1

您只是忘了发送成功动作，就像您对第一个动作一样。正确的调度应该是：

.then(response => response.json()).then(userlist => dispatch(fetchedUsersSuccessfully(userlist.data)))

Answer 2

创建商店后，将分派“ INIT”操作。因此，所有减速器均返回其初始值。这样，将填充您的初始状态树。因此，如果收到未定义的错误，则可能是由于@@ INIT动作没有有效负载。

此外，每当您调度一个动作时，所有的化简器都会被调用，您的fetchUserRequest动作没有有效负载，因此会出现未定义的错误。

React-Redux action.payload未定义

2 个答案: