使用 REDUX 将初始状态设置为来自 API 的响应

Question

我在设置 api 对初始状态对象的响应时遇到问题。

我已经尝试使用文档中所述的 useAsyncThunk，但是我正在处理的项目只允许我使用 redux-thunk。

目标是从 https://jsonplaceholder.typicode.com/users 下载用户名并使用它来创建一个自动填充输入字段来建议用户名。

Answer 1

我不明白你为什么要将你的用户名初始化为 initialState。这不是 redux 模式的工作原理。通常，您使用合理的空状态初始化您的商店：

const initialState = {
  loading: false,
  usernames: [],
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case LOADING_USERNAMES: 
      return {
        ...state,
        loading: true,
      };
    case USERNAMES_LOADED:
      return {
        ...state,
        loading: false,
        usernames: action.payload.usernames,
      };
    default:
      return state;
  }    
}

export default reducer;

然后设置您的 thunk 和普通操作：

export const LOADING_USERNAMES = '[User] loading usernames';
export const USERNAMES_LOADED = '[User] usernames loaded';

export const loadingUsernames = () => ({
  type: LOADING_USERNAMES,
});

export const usernamesLoaded = (usernames) => ({
  type: USERNAMES_LOADED,
  payload: {
    usernames,
  }
});

const getUsernameList = () => (dispatch) => {
  dispatch(loadingUsernames()); // for the loading state
  return fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => dispatch(usernamesLoaded(response.json())))

然后在你的 useEffect 钩子中任何你想初始化这个列表的地方，你调用 thunk:

dispatch(getUsernameList());

您可以决定不显示任何内容，只要加载为真且不存在任何列表，但在我看来，好的 UI 可以让用户知道正在发生某些事情。也许我没有正确理解你的问题，但这至少是我的方法。

你声明，你想要这个用于自动填充，所以在你的数据准备好之前不要显示表单，或者显示一个微调器。

使用 REDUX 将初始状态设置为来自 API 的响应

Setting Initial State to response from API with REDUX

javascript

reactjs

redux

redux-thunk

react-redux