如何从非 React 组件中读取 redux 存储？

Question

我正在使用redux 构建我的第一个react native 应用程序。

我的store配置如下

function configureStore(onComplete: ?() => void) {
  const store = autoRehydrate()(createMyAppStore)(reducers);
  persistStore(store, {storage: AsyncStorage}, onComplete);
  if (isDebuggingInChrome) {
    window.store = store;
  }
  return store;
}

我有一个认证action如下

export function authentiate(credentials) {
  return (dispatch) => {
    return LoginApi.authenticate(credentials)
    .then(response => {
      return response.json().then(function(json) {
          dispatch(onAuthSuccess(json));
      });
    })
    .then(response => { dispatch(getUserInfo()); })
    .catch(error => {
      throw(error);
    });
  };
}

我的getUserInfoaction如下

export function getUserInfo() {
  return (dispatch) => {
    return LoginApi.gerUserInfo()
    .then(result => { dispatch(onGetUserInfoSuccess(result.json())); })
    .catch(error => {
      throw(error);
    });
  };
}

我的认证reducer如下

function auth(state: State = initialState, action: Action): State {
  switch (action.type) {
    case types.AUTH_SUCCESSFUL :
    return [...state, Object.assign({}, action.auth)];
    default :
    return state;
  }
  return state;
}

LoginApi 是一个简单的 ES6 类。 getUserInfo 需要access token 等详细信息以及从LoginApi.authenticate 调用中获得的其他参数。

如何从non-react 组件中读取来自redux store 的身份验证信息？

Answer 1

redux-thunk 的第二个参数是getState

export function getUserInfo() {
  return (dispatch, getState) => {
    const state = getState() // or cherry pick what you need
    return LoginApi.gerUserInfo(state)
    .then(result => { dispatch(onGetUserInfoSuccess(result.json())); })
    .catch(error => {
      throw(error);
    });
  };
}

https://github.com/gaearon/redux-thunk#composition

这只是stores 自己的getState 函数。

http://redux.js.org/docs/api/Store.html#getState

您可以导出/导入您的store 并根据需要直接调用getState。

let store = createStore(...)
export { store }

// anywhere.js
import { store } from './your-store.js'
let state = store.getState()