Redux预加载状态会覆盖我的应用程序状态

Posted 2021-04-13

为了创建一个会话，我将一个JWToken存储在localStorage中（不是最安全的地方 - 我知道）。为了允许用户刷新浏览器窗口，我在redux中保持用户状态：

const getPersistedState = () => {
    try {
      const persistedToken = JSON.parse(localStorage.getItem('token'));
      const persistedTimeStamp = JSON.parse(localStorage.getItem('authTimeStamp'));
      if (persistedToken === null ||
          persistedTimeStamp === null) {
        return undefined
      }
      const persistedState = { user: { auth: {
            token: persistedToken,
            authTimeStamp: persistedTimeStamp,
            authed: true,
          }
        }
      }
      return persistedState
    } catch(e) {
      return {}
    }
}

const persistedState = getPersistedState()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    rootReducer,
    persistedState,
    composeEnhancers(applyMiddleware(thunk))
)

我的问题是，如果商店得到更新，整个用户状态将被覆盖。所以我无法在用户reducer上定义一个INITIAL_STATE对象，因为它会立即被覆盖。

有没有办法实现可以与现有状态合并的持久状态，这将使我能够定义INITIAL_STATE？

答案

并不意味着你添加前缀persist意味着reducer是处理它的最佳位置。

localStorage互动更像是一个组成部分。

因此，在通过SET_TOKEN成功检索所有令牌属性后，尝试在组件中调度动作localStorage。

// Component.js
const getPersistedState = () => {
  try {
    // TODO: get all attributes in local storage
    this.props.setToken(...attributes); // dispatches SET_TOKEN action
  } catch(e) {
    // error
  }
}

componentDidMount() {
  this.getPersistedState(); // retrieve token attributes
}

// Reducer.js
const INITIAL_STATE = {
  user: {
    auth: {
      token: '',
      authTimeStamp: -1,
      authed: false,
    }
  }
};

// User Reducer handles SET_TOKEN action
const user = (state = INITIAL_STATE, action) {
  switch(action.type) {
    case Action.SET_TOKEN:
      const { token, authTimeStamp, authed } = action.payload;
      return {
        ...state,
        auth: {
          token,
          authTimeStamp,
          auth,
        }
      };
    default:
      return state;
  }
}