Redux Reselect 未从 api 获取数据
Redux Reselect is not fetching the data from api
我使用了 Redux 并重新选择,但我无法通过 connect
函数从服务器获取数据。但是如果我使用 useSelector
和 useEffect
钩子。它将正常工作并成功获取数据。
但我需要使用 connect
函数而不是 useSelector
。
我在 https://codesandbox.io 工作过项目,源代码在下面 link。
source code link
示例代码在这里。
非常感谢
import { createSlice } from "@reduxjs/toolkit";
import api from "./api";
const initialUser = localStorage.getItem("user")
? JSON.parse(localStorage.getItem("user"))
: null;
// Slice
const slice = createSlice({
name: "user",
initialState: {
user: initialUser,
users: [],
isLoading: false,
error: false
},
reducers: {
startLoading: (state) => {
state.isLoading = false;
},
hasError: (state, action) => {
state.error = action.payload;
state.isLoading = false;
},
loginSuccess: (state, action) => {
state.user = action.payload;
localStorage.setItem("user", JSON.stringify(action.payload));
},
logoutSuccess: (state, action) => {
state.user = null;
localStorage.removeItem("user");
},
usersSuccess: (state, action) => {
state.users = action.payload;
state.isLoading = true;
},
getUsers: (state, action) => {
state.users = action.payload;
}
}
});
export default slice.reducer;
// Actions
const {
loginSuccess,
logoutSuccess,
usersSuccess,
startLoading,
hasError
} = slice.actions;
export const fetchUsers = () => async (dispatch) => {
dispatch(startLoading());
try {
await api
.get("/users")
.then((response) => dispatch(usersSuccess(response.data)));
} catch (e) {
dispatch(hasError(e.message));
}
};
export const login = ({ username, password }) => async (dispatch) => {
try {
// const res = await api.post('/api/auth/login/', { username, password })
dispatch(loginSuccess({ username }));
} catch (e) {
return console.error(e.message);
}
};
export const logout = () => async (dispatch) => {
try {
// const res = await api.post('/api/auth/logout/')
return dispatch(logoutSuccess());
} catch (e) {
return console.error(e.message);
}
};
export const selectUsers = (state) => state.user.users;
// App.js
const App = (props) => {
console.log("users", props.users)
return <div>sample</div>
}
const mapStateToProps = (state) => {
return { users: selectUsers(state) };
};
export default connect(mapStateToProps)(App);
看看 redux-api-middleware,它提供了一种更好的方法来将数据获取集成到 redux 工作流中
我使用了 Redux 并重新选择,但我无法通过 connect
函数从服务器获取数据。但是如果我使用 useSelector
和 useEffect
钩子。它将正常工作并成功获取数据。
但我需要使用 connect
函数而不是 useSelector
。
我在 https://codesandbox.io 工作过项目,源代码在下面 link。
source code link
示例代码在这里。
非常感谢
import { createSlice } from "@reduxjs/toolkit";
import api from "./api";
const initialUser = localStorage.getItem("user")
? JSON.parse(localStorage.getItem("user"))
: null;
// Slice
const slice = createSlice({
name: "user",
initialState: {
user: initialUser,
users: [],
isLoading: false,
error: false
},
reducers: {
startLoading: (state) => {
state.isLoading = false;
},
hasError: (state, action) => {
state.error = action.payload;
state.isLoading = false;
},
loginSuccess: (state, action) => {
state.user = action.payload;
localStorage.setItem("user", JSON.stringify(action.payload));
},
logoutSuccess: (state, action) => {
state.user = null;
localStorage.removeItem("user");
},
usersSuccess: (state, action) => {
state.users = action.payload;
state.isLoading = true;
},
getUsers: (state, action) => {
state.users = action.payload;
}
}
});
export default slice.reducer;
// Actions
const {
loginSuccess,
logoutSuccess,
usersSuccess,
startLoading,
hasError
} = slice.actions;
export const fetchUsers = () => async (dispatch) => {
dispatch(startLoading());
try {
await api
.get("/users")
.then((response) => dispatch(usersSuccess(response.data)));
} catch (e) {
dispatch(hasError(e.message));
}
};
export const login = ({ username, password }) => async (dispatch) => {
try {
// const res = await api.post('/api/auth/login/', { username, password })
dispatch(loginSuccess({ username }));
} catch (e) {
return console.error(e.message);
}
};
export const logout = () => async (dispatch) => {
try {
// const res = await api.post('/api/auth/logout/')
return dispatch(logoutSuccess());
} catch (e) {
return console.error(e.message);
}
};
export const selectUsers = (state) => state.user.users;
// App.js
const App = (props) => {
console.log("users", props.users)
return <div>sample</div>
}
const mapStateToProps = (state) => {
return { users: selectUsers(state) };
};
export default connect(mapStateToProps)(App);
看看 redux-api-middleware,它提供了一种更好的方法来将数据获取集成到 redux 工作流中