How to setState(!state) in Redux toolkit

Question

I'm new to RTK, I've been learning from tutorials for the last few days, I know how to deal with arrays, and increment or decrement the value, but I can't wrap my head around the simplest thing in RTK is toggling state. So far I have written this code :

 import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    dropdown: false
}

const dropdownSlice = createSlice({
    name: 'dropdown',
    initialState,
    reducers: {
        setDropdown: state  =>  !state
    }
});

export const {
    setDropdown
} = dropdownSlice.actions
export default dropdownSlice.reducer

and then in my component I did this

import React,{useState,useEffect} from 'react'
import { Link } from 'react-router-dom'
import {GiHamburgerMenu} from 'react-icons/gi'
import {useDispatch} from 'react-redux'
import { setDropdown } from '../../redux/slices/dropdownSlice'
import dropdownSlice from '../../redux/slices/dropdownSlice'
import './Nav.scss'


        const Nav = () => {
            const [width,setWidth] = useState(window.innerWidth)
            // const [dropdown,setDropdown] = useState(false);
            const dispatch = useDispatch()
            const checkDropdown = () =>{
              dispatch(setDropdown);
            }
        
            const checkWidth = () =>{
                setWidth(window.innerWidth)
                // if(width > 600){
                //     setDropdown(false);
                // }
                // console.log(width);
            }
            useEffect(() =>{
                window.addEventListener('resize', checkWidth)
                return () => window.removeEventListener('resize',checkWidth)
            },[])
            return (
              <nav>
                <header>
                  <div className="logo">
    ....
                  </div>
                  <div className="links">
                      {width > 600 ?
                    <ul>
                      ....
                    </ul>
                    :
                    <GiHamburgerMenu className='icon' onClick={()=> checkDropdown()}/>}
                  </div>
                </header>
                <div
                  className={
                    dropdownSlice.dropdown ? "dropdown dropdown-show" : "dropdown dropdown-hide"
                  }
        .............
                    >

Pls help, I've aged 3 years in 2 days trying to learn rtk

Answer 1

Two bugs:

1. Your reducer does not keep it's shape. It goes from { dropdown: false } to false to true to false to true.

This goes { dropdown: false } <-> { dropdown: true }

const initialState = {
    dropdown: false
}

const dropdownSlice = createSlice({
    name: 'dropdown',
    initialState,
    reducers: {
        setDropdown: (state) => { state.dropdown = !state.dropdown }
    }
});

This goes false<->true:

const initialState = false

const dropdownSlice = createSlice({
    name: 'dropdown',
    initialState,
    reducers: {
        setDropdown: state => !state
    }
});

2. you need to execute your action creator before dispatching

dispatch(setDropdown());

Answer 2

Your state is an object containing the dropdown

const dropdownSlice = createSlice({
    name: 'dropdown',
    initialState,
    reducers: {
        setDropdown: state  =>  !state.dropdown
    }
});