2

我正在我的应用程序中设置 redux，并从登录开始。到目前为止，我已经让它运行良好 - 用户使用 Google 登录，成功时我的服务器返回一个访问令牌到放入的网络应用程序redux 存储，然后可以用于将来的 API 调用。

我希望 webapp 立即请求当前用户配置文件以响应存储访问令牌。它需要在存​​储访问令牌之后 - 所以在调用减速器之后。

本质上，为了响应 AUTHENTICATED 操作，我想调度 LOAD_USER 操作 - 它本身是基于承诺的，因此最终触发 LOAD_USER_RESOLVED 操作以将新登录的用户存储到商店中，然后显示他们的UI 中的名称。

我目前正在使用 redux-promise-simple，但是如果需要更改，那没有问题。

4

1 回答 1

1

当我通常需要链接身份验证操作之类的东西时，我会在connected 登录组件中放入一些逻辑。我会设置一个布尔值，它会在我的redux 操作中从false变为。并让组件听取该值。当该值更改为 true 时，我将启动第二个操作。trueAUTHENTICATED

例子：

    // Auth reducer
export const authentication = (
  state = {
    authenticated: false,
    identity: null,
    token: null,
    loading: false,
  },
  action,
) => {
  switch (action.type) {
    case types.LOGIN:
      return {
        ...state,
      };
    case types.AUTHENTICATED:
      return {
        ...state,
        authenticated: true,
        token: action.result.data,
      };
    case types.LOAD_USER:
      return {
        ...state,
        loading: true,
      }
    case types.LOADED_USER:
      return {
        ...state,
        loading: false,
        identity: action.result.data
      }
    default: return state;
  }
}


//Connected component:
import { loadUser } from 'actions';

class Login extends React.Component {

  componentWillMount() {
    const { token, authenticated } = this.props;
    if (authenticated && token ) {
      // Dispatch your action here;
      loadUser(token);
    }
  }
  componentWillReceiveProps(nextProps) {
    const { token, authenticated } = nextProps;
    const { loadUser } = this.props;
    if (authenticated && token ) {
      // Dispatch your action here;
      loadUser(token);
    }
  }
  ...

  ...

  mapStateToProps(state) {
    const { token, authenticated } = state.authentication
    return {
      authenticated,
      token
    }
  }

  export default connect(mapStateToProps, { loadUser })(Login)

编辑：如果您宁愿将操作链接在一起，而不是让组件在 redux 存储上侦听以分派操作。看看这里的 redux-thunk 库，它是一个有用的 thunk 中间件，并且有一些非常有用的链接异步操作的示例。

于 2017-02-24T01:16:38.790 回答