响应另一个动作的调度行为

我在我的应用中设置了redux，并且从登录开始。到目前为止，我的工作效果很好 - 用户使用Google登录，成功时我的服务器返回访问令牌给放入redux存储区的Web应用程序，然后可用于将来的API调用。响应另一个动作的调度行为

我希望web应用程序立即请求当前用户配置文件以响应存储访问令牌。它需要在访问令牌存储之后 - 所以在调用reducer之后。

实质上，为了响应AUTHENTICATED动作，我想分派LOAD_USER动作 - 本身是基于promise的，所以LOAD_USER_RESOLVED动作最终被触发以将新登录的用户存储到存储器中，其中然后将在用户界面中显示他们的名字。

我现在正在使用redux-promise-simple，但如果需要改变那里没有问题。

2017-02-24 Graham

当我通常需要链接认证动作之类的东西时，我在connect ed登录组件中放置了一些逻辑。我会设置一个布尔值，从false更改为true我的AUTHENTICATED还原操作。并让组件听取该值。当价值变为真实时，我会开除第二个动作。

例子：

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

来源

2017-02-24 01:16:38

我以前见过这个建议。只是依靠UI组件来触发基于另一个商店更新的商店更新感觉有点不对。感觉就像属于商店本身或动作创作者一样。 – Graham

它也绝对可以通过动作创作者的链接动作来完成。我更喜欢让自己的行为更加分离，并发现当我以这种方式设置我的应用程序时，动作创建者保持更简洁。我将编辑我的帖子，以便有一个链接在一起的异步操作的例子，但同时在这里有一个很好的讨论例子：https://github.com/reactjs/redux/issues/1676 –

我怀疑重新 - thunk将成为答案。谢谢：） – Graham

响应另一个动作的调度行为

回答

相关问题