访问redux存储以将登录数据存储到不同的组件

// 定义一个Redux reducer
function loginReducer(state = {}, action) {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        username: action.payload.username,
      };
    case 'LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        username: null,
      };
    default:
      return state;
  }
}

// 创建Redux存储
const store = createStore(loginReducer);

// 在组件中访问Redux存储
class LoginComponent extends React.Component {
  // ...

  handleLogin = () => {
    // 触发登录动作，将登录数据存储到Redux存储中
    store.dispatch({
      type: 'LOGIN',
      payload: {
        username: 'exampleUser',
      },
    });
  };

  // ...
}

class ProfileComponent extends React.Component {
  // ...

  handleLogout = () => {
    // 触发登出动作，更新Redux存储中的登录数据
    store.dispatch({
      type: 'LOGOUT',
    });
  };

  // ...
}

// 使用Redux提供的connect函数连接组件到Redux存储
const ConnectedLoginComponent = connect()(LoginComponent);
const ConnectedProfileComponent = connect()(ProfileComponent);