如果不在所有减速器中放置 'case LOGOUT' 就无法注销用户

Question

我是 redux 的新手，正在尝试创建一个小网站，用户可以在其中：登录、注册和注销。

我已经为登录和注册创建了 2 个 reducer，并且在两个 reducer 的状态下都初始化了一个 "isLoggedIn" 字段。

当尝试为注销创建第三个 reducer 时，将其添加到 CombineReducers 然后尝试 login/register，它没有让我退出，它什么都不做。唯一可行的是，如果我只使用登录和注册减速器，并且在每个减速器上添加一个 'case LOGOUT'.

但是，我觉得有更好的方法可以做到这一点，因为它在所有需要注销功能的减速器上复制了我的代码。

authentication.js（登录）

import { userConstants } from "../constants";

const initialState = {
  user: {
    email: "",
    username: "",
  },
  isLoggedIn: false,
};

export function authentication(state = initialState, action) {
  switch (action.type) {
    case userConstants.LOGIN_REQUEST:
      return Object.assign({}, state, {
        isLoggedIn: false,
      });
    case userConstants.LOGIN_SUCCESS:
      return Object.assign({}, state, {
        isLoggedIn: true,
        user: action.user,
      });
    case userConstants.LOGIN_FAILURE:
      return {};
    case userConstants.LOGOUT:
      return Object.assign({}, state, {
        isLoggedIn: false,
      });
    default:
      return state;
  }
}

registration.js

import { userConstants } from "../constants";

export function registration(state = { isLoggedIn: false, user: {} }, action) {
  switch (action.type) {
    case userConstants.SIGN_UP_REQUEST:
      return Object.assign({}, state, {
        isLoggedIn: false,
      });
    case userConstants.SIGN_UP:
      return Object.assign({}, state, {
        isLoggedIn: true,
        user: action.user,
      });
    case userConstants.SIGN_UP_FAILED:
      return {};
    case userConstants.LOGOUT:
      return Object.assign({}, state, {
        isLoggedIn: false,
      });
    default:
      return state;
  }
}

reducers/index.js

import { combineReducers } from "redux";

import { authentication } from "./authentication";
import { registration } from "./registration";

const rootReducer = combineReducers({
  authentication,
  registration,
});

export default rootReducer;

routes/index.js

function mapStateToProps(state) {
  return {
    isLoggedIn:
      state.authentication.isLoggedIn || state.registration.isLoggedIn,
  };
}

const mapDispatchToProps = (dispatch) => ({
  logout: () => dispatch(logout()),
});

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

store.js

import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers";
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";

const logger = createLogger();

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), applyMiddleware(logger))
);

export default store;

在 routes/index.js 中，我使用 "isLoggedIn" 字段来显示用户特定页面，具体取决于他是否登录。

以上程序是我能够实现的唯一解决方案。

此外，如果重要的话，我所有的注销、登录和注册操作都在同一个文件中。

Answer 1

我最终将注册和登录缩减器放在文件中 - 同一个缩减器，所有 switch/cases 都放在一起，因为它们都需要使用 "isLoggedIn" 字段。

我想这对我来说是一个很好的解决方案，因为它们都需要使用来自 reducer 的相同状态，但如果注册和登录有不同的逻辑，它可能不会很好地工作。

如果不在所有减速器中放置 'case LOGOUT' 就无法注销用户

Unable to logout a user without putting a 'case LOGOUT' in all reducers

reactjs

react-redux

redux-reducers