为什么我的 redux 状态总是以默认情况返回？

Question

我正在使用 react-redux 但我看不到我的状态。当我检查我的状态时，它总是返回我的默认值。我检查我的类型，但它返回真值。问题出在哪里 ？感谢您的帮助

我的行动：

import { 
  SET_MENULIST
} from "../constants/Menu";

export const makeMenu = (menuList) => {
  return {
    type: SET_MENULIST,
    menuList,
  };
};

我的减速机：

const menu = (state = {}, action) => { 

  switch (action.type) {
    case SET_MENULIST:
      return {
        menuList: action.menuList,
      };
 
    default:
      return "err";
  }
};
export default menu;

我的 reducer/index.js（combineReducers）：

import { combineReducers } from "redux";
import Auth from "./Auth";
import Theme from "./Theme";
import Menu from "./Menu";
const reducers = combineReducers({
  theme: Theme,
  auth: Auth,
  menu: Menu,
});

export default reducers;

我尝试在我的页面上像 makeMenu(data); 一样使用它并像这样测试它：

const test = useSelector((state) => state.menu);
 console.log(test) //Its returns "err" (Default value of my reducer

)

错在哪里？谢谢回复！！！

Answer 1

你快到了。有几件事要改变：

调度动作

从调用makeMenu 函数的位置，您必须调度操作。 示例：

import {useDispatch} from 'react-redux'
import {makeMenu} from './path/to/makeMenu'

const ComponentExample = props => {
  const dispatch = useDispatch()
  
  dispatch(makeMenu(menuList)) /* call this wherever you want to call makeMenu */

}

奖励：从减速器返回

当你像这样从reducer返回一个新对象时，你会覆盖其他值，所以一个潜在的错误。

case SET_MENULIST:
      return {
        menuList: action.menuList,
      };

您可能想要使用扩展运算符：

case SET_MENULIST:
      return {
        ...state,
        menuList: action.menuList,
      };