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

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

不是直接从其各自的切片文件中导出每个 SliceAction，而是每个 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 的自动完成（自动完成功能）。

Answer 2

即使您不直接使用 TypeScript 而只是编写 JavaScript，您的编辑器仍将使用库的 TypeScript 类型来为您提供诸如自动完成之类的功能。所以即使你自己不直接使用 TypeScript，这仍然与你相关。

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

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

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

此时我只能建议不要将 WebStorm 用于涉及 JavaScript 或 TypeScript 的任何类型的软件开发。
Visual Studio 代码可能需要一些精心挑选和安装的扩展才能与 WebStorm 实现同等功能，但它是免费的并且运行良好，所以我强烈推荐它。

Redux Toolkit 不适用于 WebStorm

Redux Toolkit doesn't work well with WebStorm

javascript

autocomplete

webstorm

reactjs

redux