如何在 Redux 工具包中设置状态（！状态）

Question

我是RTK新手，这几天一直在学习教程，我知道如何处理数组，以及递增或递减值，但我无法理解RTK 中最简单的事情就是切换状态。到目前为止，我已经编写了这段代码：

 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

然后在我的组件中我这样做了

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"
                  }
        .............
                    >

请帮忙，为了学习 rtk，我在 2 天内老了 3 岁

Answer 1

您的状态是一个包含 dropdown

的对象

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

Answer 2

两个错误：

你的减速器没有保持它的形状。它从 { dropdown: false } 到 false 再到 true 再到 false 再到 true。

这样 { dropdown: false } <-> { dropdown: true }

const initialState = {
    dropdown: false
}

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

这样 false<->true:

const initialState = false

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

你需要在发送之前执行你的 action creator

dispatch(setDropdown());

如何在 Redux 工具包中设置状态（！状态）

How to setState(!state) in Redux toolkit

reactjs

redux-toolkit