javascript - Redux Toolkit 不适用于 WebStorm

Question

我正在学习 Redux 和 Redux Toolkit，但我不明白为什么在我尝试调度操作时自动完成不起作用(见下图)。
我导入了“ Action ”，但 WebStorm 看不到任何方法。
在 VSCode 上它工作得很好。


这里的 Action :

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 的同一位教授学习相同的教程。只是一个问题或以特定方式组织您的文件和导入/导出。
而不是直接从其各自的切片文件导出每个 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 自动完成(自动完成功能)。