Question

我在反应 redux 减速器时遇到了麻烦，对我来说没有明显的原因影响错误的减速器。减速器用于通过反应样式打开和关闭模态。当调用 successModal 操作时，由于某种原因它们会影响 loginModal 减速器，但反之则不然。希望你们能帮助我:)

动作

export const loginModalAppear = () => {


return {
    type: 'LOGIN_MODAL_APPEAR',
  };
};

export const loginModalDisappear = () => {
  return {
    type: 'LOGIN_MODAL_DISAPPEAR',
  };
};

export const successModalAppear = () => {
  return {
    type: 'SUCCESS_MODAL_APPEAR',
  };
};

export const successModalDisappear = () => {
  return {
    type: 'SUCCESS_MODAL_DISAPPEAR',
  };
};

成功模态减速器

const successModalReducer = (state = {opacity: 0, pointerEvents: 'none'}, action) => {


switch (action) {
  case 'SUCCESS_MODAL_APPEAR':
    return state = {opacity: 1, pointerEvents: 'all'};
  case 'SUCCESS_MODAL_DISAPPEAR':
    return state = {opacity: 0, pointerEvents: 'none'};
  default:
    return state = {opacity: 0, pointerEvents: 'none'};
  }
};

export default successModalReducer;

登录模态减速器

const loginModalReducer = (state = {opacity: 0, pointerEvents: 'none'}, action) => {
  switch (action.type) {
  case 'LOGIN_MODAL_APPEAR':
    return state = {opacity: 1, pointerEvents: 'all'};
  case 'LOGIN_MODAL_DISSAPEAR':
    return state = {opacity: 0, pointerEvents: 'none'};
  default:
    return state = {opacity: 0, pointerEvents: 'none'};
  };
};

export default loginModalReducer;

如果您需要任何其他代码，请告诉我:)

Answer 1

在 redux 中，每一个动作总是被转发到每一个 reducer。由于您的减速器执行 default 情况，返回的内容可能与之前的状态不同，因此每个“其他操作”都会触发 default 情况。

所以你的减速器应该看起来像

const loginModalReducer = (state = {opacity: 0, pointerEvents: 'none'}, action) => {
  switch (action.type) {
  case 'LOGIN_MODAL_APPEAR':
    return {opacity: 1, pointerEvents: 'all'};
  case 'LOGIN_MODAL_DISSAPEAR':
    return {opacity: 0, pointerEvents: 'none'};
  default:
    return state
  };
};

（另请注意，分配给状态变量没有任何作用，所以我删除了它）

一般来说，你在这里学习的是一种非常过时的 redux 风格，所以我猜你正在学习一个过时的教程。现代 redux 看起来非常不同。请按照 https://redux.js.org/tutorials/index 上的官方教程学习现代 redux（这将使您的 75% 的代码过时）。

Redux 减速器影响不同减速器

1 个答案: