是否有必要在 Redux Toolkit 中定义我们自己的 action creator?
Is it necessary to define our own action creators in Redux Toolkit?
所以,我试图找出在我的 React 项目中使用 redux 工具包的最佳方式。这是我目前在 redux 工具包中编写典型切片以及 redux-thunk 以进行 API 调用的方式。
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { baseUrl } from "../../../baseUrl";
const searchTrip = createSlice({
name: "searchTrip",
initialState: {
isLoading: false,
data: null,
success: false,
},
reducers: {
sendRequest: (state, action) => ({
...state,
isLoading: true,
}),
sendSuccess: (state, action) => ({
...state,
isLoading: false,
errMess: null,
data: action.data,
success: true,
}),
sendFailed: (state, action) => ({
...state,
isLoading: false,
errMess: action.message,
success: false,
}),
},
});
export const { sendFailed, sendRequest, sendSuccess } = searchTrip.actions;
//动作创作者:
export const requestSend = () => {
return {
type: sendRequest.type,
};
};
export const receiveSend = (response) => {
return {
type: sendSuccess.type,
data: response,
};
};
export const sendError = (message) => {
return {
type: sendFailed.type,
message,
};
};
//redux thunk 进行 API 调用
export const postSearchTrip = (data) => (dispatch) => {
dispatch(requestSend());
const call = {
url: baseUrl + "trips/search",
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("token"),
},
data: {
search: data,
},
};
return axios(call)
.then((response) => {
dispatch(receiveSend(response.data));
})
.catch((error) => {
dispatch(sendError(error.message));
alert(error);
});
};
export default searchTrip.reducer;
现在,我觉得每个切片都重复动作创建器部分,有没有办法不使用它。可以直接使用sendSuccess、sendRequest等吗??
还有,两个slice的reducer可以重名吗?就像一般的 API 调用一样,我将我的缩减器命名为 sendRequest、sendSuccess 和 sendFaliure,并将这部分复制粘贴到所有切片中。这会造成任何问题吗?
不,createSlice
的要点是 它会自动为您生成动作创建者 - 您不需要(并且 不应该 )自己编写动作创作者!
当您编写自己的 requestSend()
函数时,您只是在复制 createSlice
已经为您完成的功能。你可以完全停止这样做:)
另外,请注意:
- Redux Toolkit 已经 a
createAsyncThunk
API 简化了发出异步请求和调度操作的过程
- 我们即将发布一个新的 "RTK Query" API,它将完全抽象数据获取过程 - 根本不需要编写 任何 thunk 或 reducer 来获取数据数据
所以,我试图找出在我的 React 项目中使用 redux 工具包的最佳方式。这是我目前在 redux 工具包中编写典型切片以及 redux-thunk 以进行 API 调用的方式。
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { baseUrl } from "../../../baseUrl";
const searchTrip = createSlice({
name: "searchTrip",
initialState: {
isLoading: false,
data: null,
success: false,
},
reducers: {
sendRequest: (state, action) => ({
...state,
isLoading: true,
}),
sendSuccess: (state, action) => ({
...state,
isLoading: false,
errMess: null,
data: action.data,
success: true,
}),
sendFailed: (state, action) => ({
...state,
isLoading: false,
errMess: action.message,
success: false,
}),
},
});
export const { sendFailed, sendRequest, sendSuccess } = searchTrip.actions;
//动作创作者:
export const requestSend = () => {
return {
type: sendRequest.type,
};
};
export const receiveSend = (response) => {
return {
type: sendSuccess.type,
data: response,
};
};
export const sendError = (message) => {
return {
type: sendFailed.type,
message,
};
};
//redux thunk 进行 API 调用
export const postSearchTrip = (data) => (dispatch) => {
dispatch(requestSend());
const call = {
url: baseUrl + "trips/search",
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("token"),
},
data: {
search: data,
},
};
return axios(call)
.then((response) => {
dispatch(receiveSend(response.data));
})
.catch((error) => {
dispatch(sendError(error.message));
alert(error);
});
};
export default searchTrip.reducer;
现在,我觉得每个切片都重复动作创建器部分,有没有办法不使用它。可以直接使用sendSuccess、sendRequest等吗??
还有,两个slice的reducer可以重名吗?就像一般的 API 调用一样,我将我的缩减器命名为 sendRequest、sendSuccess 和 sendFaliure,并将这部分复制粘贴到所有切片中。这会造成任何问题吗?
不,createSlice
的要点是 它会自动为您生成动作创建者 - 您不需要(并且 不应该 )自己编写动作创作者!
当您编写自己的 requestSend()
函数时,您只是在复制 createSlice
已经为您完成的功能。你可以完全停止这样做:)
另外,请注意:
- Redux Toolkit 已经 a
createAsyncThunk
API 简化了发出异步请求和调度操作的过程 - 我们即将发布一个新的 "RTK Query" API,它将完全抽象数据获取过程 - 根本不需要编写 任何 thunk 或 reducer 来获取数据数据