Redux Toolkit 不适用于 WebStorm

Question

我正在学习 Redux 和 Redux Toolkit，但我不明白为什么在我尝试调度操作时自动完成不起作用（见下图）。

我导入了“动作”，但 WebStorm 看不到任何方法。

在 VSCode 上效果很好。

这里是行动：

import {createSlice} from "@reduxjs/toolkit";

const initialCounterState = { counter: 0, showCounter: true };

const counterSlice = createSlice({
    name: "counter",
    initialState: initialCounterState,
    reducers: {
        increment(state) {
            state.counter++;
        },
        decrement(state) {
            state.counter--;
        },
        increase(state, action) {
            state.counter += action.payload;
        },
        toggleCounter(state) {
            state.showCounter = !state.showCounter;
        },
    },
});

export const counterActions = counterSlice.actions;
export default counterSlice.reducer

如上图，第一张图片是 WebStorm，第二张是 vscode。

Vscode 检测到所有方法，WebStorm 没有，我在 google 上没有发现类似的问题..

我想知道在 WebStorm 上看不到这些方法是不是很正常，这很奇怪，WebStorm 通常很强大..

Answer 1

这是一个已知问题，但范围更广：
不幸的是，WebStorm 不能很好地与 TypeScript 配合使用，并且其他编辑器只是使用库的 TypeScript 类型（即使在 JavaScript 场景中）来自动完成和错误消息，WebStorm 只是随机猜测错误的东西，因为它们的名称有点相似。

特别是对于 Redux Toolkit，他们的错误跟踪器中存在多个打开的问题，他们在忽略这些方面做得很好：例如 https://youtrack.jetbrains.com/issue/WEB-46527 和 https://youtrack.jetbrains.com/issue/WEB-42559。

所以，是的，由于 WebStorm 中的错误，在我上面链接的错误得到修复之前，“在 WebStorm 上看不到这些方法是正常的”。

在这一点上，我只能建议不要将 WebStorm 用于任何涉及 JavaScript 或 TypeScript 的软件开发。
Visual Studio Code 可能需要精心挑选和安装一些扩展才能与 WebStorm 实现功能对等，但它是免费的并且运行良好，所以我推荐的再多也不过分。

Answer 2

我刚刚找到了解决方案，尝试了不同的方法或重新排列了我的文件。我正在与 Udemy 的同一位教授学习相同的教程。只是一个问题或以特定方式组织您的文件和导入/导出。

不是直接从其各自的切片文件导出每个 SliceAction，而是必须将它们中的每一个都集中在存储索引文件上并从那里导出。

解决方案：代码示例：

文件：src/store/counterSlice.js

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

const counterInitialState = {
    counter: 0,
    showCounter: true,
};

const counterSlice = createSlice({
    name: 'counterSlice',
    initialState: counterInitialState,
    reducers: {
        incrementCounter(state) {
            state.counter++;
        },
        decrementCounter(state) {
            state.counter--;
        },
        increaseByCounter(state, action) {
            state.counter = state.counter + action.payload.amount;
        },
        decreaseByCounter(state, action) {
            state.counter = state.counter - action.payload.amount;
        },
        toggleCounter(state) {
            state.showCounter = !state.showCounter;
        },
    }
});

export default counterSlice;

文件：src/store/authSlice.js

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

const authInitialState = {
    isAuthenticated: false,
};

const authSlice = createSlice({
    name: 'authSlice',
    initialState: authInitialState,
    reducers: {
        logIn(state) {
            state.isAuthenticated = true;
        },
        logOut(state) {
            state.isAuthenticated = false;
        },
        toggleLogging(state) {
            state.isAuthenticated = !state.isAuthenticated;
        },
    }
});

export default authSlice;

文件：src/store/index.js

import {configureStore} from '@reduxjs/toolkit';
import counterSlice from "./counterSlice";
import authSlice from "./authSlice";

const store = configureStore({
    reducer: {
        counterSliceReducer: counterSlice.reducer,
        authSliceReducer: authSlice.reducer,
    },
});

export const counterSliceActions = counterSlice.actions;
export const authSliceActions = authSlice.actions;

export default store;

以这种方式组织文件后，您将看到现在您可以完美地查看导入的 CaseReducerActions 对象（如 authSliceActions 或 counterSliceActions 中的动作创建器方法，例如）。

这就是我的 WebStorm IDE 现在的样子：

文件：src/App.js

文件：src/components/Counter/Counter.jsx

如您所见，现在我使用 WebStorm 自动完成（自动完成功能）。