如何在Action中调用Reducer存储变量及会话管理用户凭证

我来帮你一步步解决这两个问题哈～

在Redux的逻辑里，Action本身没法直接读取Reducer里维护的状态，但从你的代码来看，你已经在用Redux Thunk（返回了一个包含dispatch的函数），这种情况下，Thunk函数还能拿到第二个参数getState——它可以帮你获取当前整个Redux store的完整状态。

举个实际的例子，如果你想在某个Action里获取已存储的用户信息，写法大概是这样：

export function someAction() {
  return function (dispatch, getState) {
    // 获取整个store的状态
    const currentState = getState();
    // 假设你的用户状态存在名为`auth`的reducer下，取出对应变量
    const storedUserId = currentState.auth.user_id;
    const storedToken = currentState.auth.token;
    
    // 接下来就可以用这些变量做你需要的操作了
    console.log("当前存储的用户ID：", storedUserId);
  };
}

对你的loginUser函数来说，如果后续逻辑需要用到已有的状态，同样可以通过getState来获取。

我们可以利用浏览器的localStorage（持久化存储，关闭浏览器后数据仍保留）或者sessionStorage（会话级存储，关闭浏览器就自动清除）来实现，下面以localStorage为例，结合你的代码修改：

首先修改你的loginUser函数，在分发authUser action后，把值存到本地存储：

export function loginUser(email, password) {
  return function (dispatch) {
    return axios.post(SIGNIN_URL, { email, password }).then((response) => {
      var { user_id, token } = response.data;
      dispatch(authUser(user_id, token)); 
      
      // 将用户信息存入localStorage
      localStorage.setItem('user_id', user_id);
      localStorage.setItem('token', token);
    });
  };
}

然后写一个登出的Action，在分发清除用户状态的action同时，移除本地存储的内容：

export function logoutUser() {
  return function (dispatch) {
    // 分发清除auth状态的action（需要你在对应的reducer里处理这个action）
    dispatch(unauthUser());
    
    // 移除localStorage里的用户信息
    localStorage.removeItem('user_id');
    localStorage.removeItem('token');
    // 如果你需要清空所有本地存储内容，也可以用：
    // localStorage.clear();
  };
}

另外，如果你希望页面刷新后，Redux store能自动从本地存储恢复用户状态，可以在应用初始化时（比如创建store的地方），从localStorage读取值并初始化reducer：

// 在store初始化的位置
const initialAuthState = {
  user_id: localStorage.getItem('user_id') || null,
  token: localStorage.getItem('token') || null
};
// 将这个initialAuthState传入你的auth reducer作为初始状态

这样一来，不管是在不同JS文件的Action里通过getState从store获取，还是直接通过localStorage.getItem('user_id')读取，都能复用这些变量啦。

内容的提问来源于stack exchange，提问作者Markus Hayner