Redux Toolkit doesn't work well with WebStorm

Question

I'm learning Redux and Redux Toolkit, but I don't understand why autocomplete doesn't work when I'm trying to dispatch an action (see the image below).

I imported the "action" but WebStorm can't see any methods.

On VSCode it works very well.

Here the 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

Like you can see above , the first image is WebStorm , the second is vscode.

Vscode detects all the methods , WebStorm doesn't , I didn't find any issue like these on google..

I'm wondering if it's simply normal to not see theses methods on WebStorm , it would be weird , WebStorm it's powerful usually..

Answer 1

I just found the solution, experimenting with different ways or rearranging my files. I'm taking the same tutorial with the same profesor at Udemy. Is just a matter or organizing your files and imports/exports in a specific way.

Instead of exporting each SliceAction directly from its respective slice file, each one of them must be centralized on the store index file and exported from there.

Solution: Code example:

File: 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;

File: 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;

File: 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;

After organizing your files this way, you will see that now you have a perfect visibility over the action creator methods in your imported CaseReducerActions object (like authSliceActions or counterSliceActions, for example).

So this is how my WebStorm IDE looks like right now:

File: src/App.js

File: src/components/Counter/Counter.jsx

As you can see, now I have auto completion (autocomplete feature) using WebStorm.

Answer 2

Even if you are not using TypeScript directly and only write JavaScript, your editor will still use a library's TypeScript typings to give you things like autocomplete. So even if you are not directly using TypeScript yourself, this is still relevant to you.

---

This is a known issue, but it is a bit broader:
Unfortunately, WebStorm does not work very well with TypeScript and where other editors just use the library's TypeScript typings (even in JavaScript scenarios) for autocomplete and error messages, WebStorm just randomly guesses wrong stuff because things have kinda similar names.

For Redux Toolkit specifically, there are multiple issues open in their bug tracker and they do a great job at ignoring that: https://youtrack.jetbrains.com/issue/WEB-46527 and https://youtrack.jetbrains.com/issue/WEB-42559 for example.

So yes, due to bugs in WebStorm it is unfortunately "normal to not see theses methods on WebStorm" until the bugs I linked above are fixed.

At this point I can only recommend not using WebStorm for any kind of software development involving JavaScript or TypeScript.
Visual Studio Code might need a few extensions hand-picked and installed to get on feature parity with WebStorm, but it is free and works very well, so I cannot recommend that enough.