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.