2017-02-04 152 views
0

我打电话给我的终极版中的一个之后进行该调用操作是这样的:终极版,确保终极版完成

performAction(updatesomevalue); 

和我想的地方把我的状态时,上面的动作完成:

sendState(state); 

如何链接这些调用?行动没有回调,所以我不能使用这种方法,我想这可能不是这样做的一种减少的方式呢?

+0

一个简单的方法应该是通过redux动作处理代码中的'setTimeout'调用将它添加到JS事件队列中。当我需要副作用时,我已经完成了很多工作,但是如果您在'sendState'中修改状态(在redux流程之外),您可能会遇到不好的时间。 – Josh

+0

如果您的意思是调用'performAction'的代码需要在回调中传递,并且要使用结果,那么我会说恕我直言,您应该尝试将该回调中执行的任何操作转移到事件流/还原状态,以消除该回调的需要。我也这样做过(承诺和行动回调),但在我看来,它更加脆弱和难以推理。 – Josh

回答

0

异步Redux的操作与终极版 - 咚

异步终极版动作打交道时,最简单的解决方案是使用终极版-的thunk。

终极版,thunk的目的是,它使我们能够调度功能的行动(而不是你可能习惯普通的旧对象)

我们为什么要派遣返回的功能操作?

这个问题可以改为:为什么redux thunk一个有用的库?

如果我们可以调度一个函数。然后这个函数可以被授予对redux store API的访问权限,因此当将来调用该操作时,它可以访问该商店的当前状态和分派。有权访问调度是至关重要的,因为这意味着此功能可以派发额外的redux操作。下面是一个redux thunk动作创建器的示例,它遵循返回函数的redux-thunk签名。

这个redux thunk动作创建器调度一个初始异步操作,例如调用一个外部API,然后用该异步API调用的结果更新状态。

然后检索新状态并用于分派额外的动作。 为了使第一个异步api成为可能,我们使用同构获取库,这是一个基于promise的请求库,这就是为什么我们能够通过.then链接获取,然后调用获取返回一个可接受的承诺。

import fetch from 'isomorphic-fetch' 

// call api then update state and dispatch second sync action 
// based on new state 
function thunkActionCreator() { 
    return (dispatch, getState) => { 

    return fetch(`http://www.example.com/api/users/${id}`) 
      .then(response => { 
       // if request successful dispatch action 
       // using response data to change state 
       if (response.status !== 200) { 
       dispatch(firstAction(response.data)) 
       } 

       // get the new state 
       const secondState = getState() 

       // use this newState to dispatch a new action 
       dispatch(secondAction(secondState)) 
      }) 
    } 
} 

记住,你需要终极版,形实转换添加到中间件链

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from './reducers/index'; 

// Note: this API requires [email protected]>=3.1.0 
const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
); 

由于终极版,thunk是一个中间件的它坐落在中间件链。在任何redux应用程序中分派动作时,它会通过完整的中间件链,每个中间件都实现一些自定义功能,例如在redux-logger的情况下登录哪个console.logs在应用程序中发生的操作。