正在将初始状态设置为来自具有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;

然后你设置了你的暴徒和简单的行动：

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可以让用户知道发生了什么。也许我没有完全理解你的问题，但这至少是我的方法。

您声明，您希望将其用于自动填充，所以在数据准备好之前，可能不显示表单，或者显示微调器。