Redux createAsyncThunk命名约定

idv4meu8  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(183)

一个简短的问题,是否可以为我的asynthunk设置使用相同的标签?在我的SS中,它显示为fetchFOrmData-users/fetchFormData,因为在文档中它总是显示为不同的标签

xpcnnkqh

xpcnnkqh1#

这是一个基于观点的问题。
首先,我们应该知道redux操作类型的推荐命名约定。
我们建议使用**“域/操作”**约定以提高可读性。
就我个人而言,我更喜欢保持thunk名称与domain/actionaction部分相同。
例如:
users.slice.ts

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchAllUsers = createAsyncThunk('users/fetchAllUsers', () => []);
export const fetchUserById = createAsyncThunk('users/fetchUserById', () => ({}));

locations.slice.ts

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchAllLocations = createAsyncThunk('locations/fetchAllLocations', () => []);
export const fetchLocationById = createAsyncThunk('locations/fetchLocationById', () => ({}));

main.ts

import { fetchLocationById, fetchAllLocations } from './location.slice';
import { fetchUserById, fetchAllUsers } from './user.slice';

function main() {
  fetchUserById();
  fetchAllUsers();

  fetchLocationById();
  fetchAllLocations();
}

有几个优点:
1.如果我们使用fetchAll,我们必须使用名称空间导入(import * as usersSlice from './users.slice.ts')或导入别名。否则,用户切片和位置切片的fetchAll将发生冲突。

import * as userSlice from './user.slice';
import * as locationSlice from './location.slice';

function main() {
  userSlice.fetchAll();
  userSlice.fetchById();

  locationSlice.fetchAll();
  locationSlice.fetchById();
}

1.当我们在编辑器或IDE中进行全局搜索时,fetchAllUsersfetchAll更准确,搜索结果也更少。
1.在阅读代码和调试时,我们不需要在操作类型(users/fetchAllUsers)和形实转换名称(fetchAllUsers)之间进行Map。
我看到许多项目保持thunk名称与action类型名称相同。
grafana使用此命名惯例。

相关问题