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

问题描述 投票:0回答:1

为了创建一个会话,我将一个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

reactjs redux
1个回答
0
投票

并不意味着你添加前缀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;
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.