Redux Toolkit 与 WebStorm 不能很好地配合

Question

我正在学习 Redux 和 Redux Toolkit，但我不明白为什么当我尝试分派操作时自动完成功能不起作用（请参见下图）。

我导入了“action”，但 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 与同一位教授一起学习相同的教程。只是以特定方式组织文件和导入/导出的问题。

每个 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 实现了自动完成（自动完成功能）。