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

Posted 2023-02-22

【中文标题】调度动作以响应另一个动作

【英文标题】：Dispatch action in response to another action

【发布时间】：2017-07-14 16:50:58

【问题描述】：

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

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

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

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

【参考方案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 中间件，并且有一些非常有用的链接异步操作的示例。

【讨论】：

我以前见过这个建议。依靠 UI 组件来触发一次商店更新基于另一次发生，这感觉有点不对劲。感觉这要么属于商店本身，要么属于动作创建者..

当然也可以通过在动作创建器中链接动作来完成。我更喜欢让我的动作更加解耦，并发现当我以这种方式设置我的应用程序时，动作创建者会更加简洁。我将编辑我的帖子，以便有一个将异步操作链接在一起的示例，但与此同时，这里有一个很好的示例讨论：github.com/reactjs/redux/issues/1676

我怀疑 redux-thunk 将成为答案。谢谢你:)