redux封装全局登陆记录token代码示例

以下是一个基本的Redux封装示例，用于管理全局登录记录并存储token。

首先，我们需要创建一个Redux store，并定义一个初始状态对象（例如，初始化为空的登录记录）：

import { createStore } from 'redux';

const initialState = {
  isLoggedIn: false,
  token: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        isLoggedIn: true,
        token: action.payload.token
      };
    case 'LOGOUT':
      return {
        isLoggedIn: false,
        token: null
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

我们定义了两个Redux操作：登录和注销。当用户登录时，我们将登录状态设置为true，并将token存储在状态中。当用户注销时，我们将登录状态设置为false，并将token重置为null。

接下来，我们可以创建action creators，这些函数将生成Redux操作对象，并将它们分发到store中：

export const login = (token) => ({
  type: 'LOGIN',
  payload: { token }
});

export const logout = () => ({
  type: 'LOGOUT'
});

这些操作对象将被dispatch到store中，以更新状态。

最后，我们可以在应用程序中的任何地方使用这些操作，以访问全局登录记录和token状态：

import { useSelector, useDispatch } from 'react-redux';
import { login, logout } from './actions';

// 在组件中使用登录操作
const dispatch = useDispatch();

const handleLogin = (token) => {
  dispatch(login(token));
}

// 在组件中使用注销操作
const handleLogout = () => {
  dispatch(logout());
}

// 在组件中获取登录状态和token
const isLoggedIn = useSelector(state => state.isLoggedIn);
const token = useSelector(state => state.token);

在这个示例中，我们使用了React Redux中的useSelector和useDispatch钩子，以便从store中读取状态并分发操作。通过这些钩子，我们可以轻松地在应用程序中使用全局登录记录和token状态。