为啥我的状态在 useDispatch 后没有更新

Posted 2023-02-22

【中文标题】为啥我的状态在 useDispatch 后没有更新

【英文标题】：Why is my state not updating after useDispatch为什么我的状态在 useDispatch 后没有更新

【发布时间】：2020-04-14 21:23:12

【问题描述】：

我有一个非常简单的设置。至少在我没有经验的第一眼看来，这似乎没问题，但是在尝试发送一个动作来切换状态时，它似乎没有做任何事情，我不知道为什么。

这是我的商店的配置方式：

import  createAction  from '@reduxjs/toolkit';
import  createReducer, configureStore  from '@reduxjs/toolkit';

// action
export const TOGGLE_QUIZ_MENU_CHOICE = 'TOGGLE_QUIZ_MENU_CHOICE';
export const actionToggleQuizChoices = createAction(TOGGLE_QUIZ_MENU_CHOICE);

// store and reducer
type StoreState = 
  isMultipleChoice: boolean;


const initalState = 
  isMultipleChoice: false,


const reducer = createReducer(initialState, 
   [actionToggleQuizChoices.type]: (state) => (
      ...state, 
      isMultipleChoice: !state.isMultipleChoice 
   )


const store = configureStore(
   reducer
)

（...那么它显然是通过<Provider> 传递的） 后来在我的组件中：

import React from 'react';
import  connect, useDispatch  from 'react-redux';
import  actionToggleQuizChoices  from '../../../store/actions';

type Props = 
   isMultipleChoice: boolean;


const QuizMenu: React.FC<Props> = (props: Props) => 
   const dispatch = useDispatch()

   console.log(props);

   return (
     <button type='button' onClick=() => dispatch(props.actionToggleQuizChoices) />
   )


const mapStateToProps = (state: StoreState): StoreState => (
    isMultipleChoice: state.isMultipleChoice 
)
const mapDispatchToProps =  actionToggleQuizChoices 

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(QuizMenu);

现在我的道具似乎被正确映射（看起来我的动作也是如此（虽然我是 redux 的新手），但我的动作似乎不会影响我的状态。

为了提问，我已经简化了示例，但是您可以清楚地看到我点击了按钮并且状态不受影响

【参考方案1】：

您的问题在于您要发送的内容。

简短：您不需要 useDispatch 只需 onClick=props.actionToggleQuizChoices

长： 你的

const mapDispatchToProps =  actionToggleQuizChoices 

将被翻译成类似的东西

const mapDispatchToProps = (dispatch) => ( actionToggleQuizChoices: (...args) => dispatch(actionToggleQuizChoices(....args)) )

那么在你的组件内部你实际上在做的是

dispatch(((...args) => dispatch(actionToggleQuizChoices()))(props.actionToggleQuizChoices))

如您所见，您正在调度一个函数。函数只能由自定义中间件解释，或者如果您使用的是 redux-thunk。

【讨论】：

哦，那是我的错。没有意识到这一点。钩子的名称对我来说有点误导，但我想这主要是我没有正确研究源代码的坏处。谢谢:)

很高兴为您提供帮助。很高兴知道为什么您的问题被否决了..

问自己同样的事情。我实际上也对此感到有些沮丧，因为我确实尽力解释了这个问题，这主要是因为我很困惑，因为 redux + react-redux + redux-toolkit 有点让我头疼作为一个正在学习它的人，这会导致一个错误，我相信任何真正接触该技术的人都会犯错误，并且在官方文档中没有明确解释。无论哪种方式，很高兴看到仍然有像您这样的人经常访问该网站并在这里提供真正的帮助！朋友节日快乐:-)

也祝你节日快乐