调度动作以响应另一个动作

Question

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

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

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

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

Answer 1

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

例子：

    // 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 library here，它是一个有用的 thunk 中间件，并且有一些非常有用的链接异步操作的示例。