0

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

我为登录和注册创建了 2 个减速器，并且在两个减速器的状态下都初始化了一个“isLoggedIn”字段。

当尝试为注销创建第三个减速器时，将其添加到 CombineReducers 然后尝试登录/注册，它没有让我退出，它什么也不做。唯一有效的是，如果我只使用登录和注册减速器，并且在每个减速器上添加一个“案例 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;
  }
}

注册.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;
  }
}

减速器/index.js

import { combineReducers } from "redux";

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

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

export default rootReducer;

路线/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”字段来显示用户的特定页面取决于他是否登录。

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

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

4

1 回答 1

0

我最终将注册和登录减速器放在文件中 - 相同的减速器，所有开关/案例都放在一起，因为它们都需要使用“isLoggedIn”字段。

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

于 2020-05-24T09:49:34.287 回答