调度操作后Redux Thunk回调？

所以在我的阵营组成部分，我有这样的：调度操作后Redux Thunk回调？

this.props.updateAlertCallback('error', ERROR_MESSAGE)

我updateAlertCallback操作是：

export const updateAlert = (alert, message) => { 
    return { 
    type: 'UPDATE_ALERT', 
    alert, 
    message 
    } 
} 

export const updateAlertCallback = (alert, message) => { 
    return dispatch => { 
    return dispatch(updateAlert(alert, message)).then(() => { 
     console.log('Done!'); 
    }); 
    } 
}

，我发现了以下错误：遗漏的类型错误：调度（...）。那么是不是一个功能

运行完成后，什么是正确的方式登录的东西？

来源

2016-08-20 Drew

这有很多错误。首先，你不清楚你想要完成什么。此外，你分配'数据'，然后立即检查它是否真实。它始终是你分配它的原因。然后'updateAlert'不会返回任何东西。它应该返回一个动作，或者如果你需要使用某些东西，它应该返回一个函数。 – DDS

我也注意到你正在调用一个回调函数，但因为你所有的代码都是同步的（你不需要等待任何东西），所以根本就不需要回调。 – DDS

嗨@DDS，我继续前进，并用我最新的情况更新了这个问题。我试图在调用this.props.updateAlert之后从我的React组件启动回调，而不是在动作中启动回调。我想我越来越近了 - 你对这个更新的代码有什么想法吗？ – Drew

function showAlert(message) { 
    return { 
    type: SHOW_ALERT, 
    message 
    }; 
} 

function hideAlert(message) { 
    return { 
    type: HIDE_ALERT, 
    }; 
} 

function flashAlert(message) { 
    return (dispatch) => { 
    dispatch(showAlert(message)); 
    setTimeout(() => { 
     dispatch(hideAlert()); 
    }, 5000); 
    } 
}

你需要终极版，形实转换这个工作。然后，您可以使用this.props.flashAlert('Oh noes!!!!')和正确的mapStateToProps。还需要还原剂和反应组分。

褪色并不一定是一件容易的事情。我建议你保存一段时间。

flashAlert函数的作用是返回一个函数，该函数需要一个函数dispatch。这个功能可以做各种有趣的事情，但还没有。首先将这个函数传递给redux的dispatch。这种派遣通常会抛出，因为动作必须是简单的对象。但是因为你使用了redux-thunk，它会很好。 Redux-thunk将调用该函数并将其从redux传递给dispatch函数。现在函数将最终运行。它所做的第一件事是通过调用showAlert()发送一个动作。这一次它是一个具有type属性的对象，这使它成为一个适当的缩减操作。据推测，redux将把这个动作传递给我们的reducer，它将用新的信息更新状态，但我们不知道这一点，因为简化起见，reducer没有被回答。谁知道它包含哪些代码。莫名其妙地改变了信息后，我们做了一个setTimeout()。当这个回调时，我们使用之前使用的相同的dispatch函数调用我们通过调用hideAlert()得到的另一个动作。我们仍然拥有它。这大概会清理国家的消息。

只要状态发生变化，Redux就会反应重新渲染适当的组件。据推测，这些组件中的一个将根据具体情况显示或不显示该消息。

来源

2016-08-20 16:22:08 DDS

谢谢@DDS！我不知道你是否看到了，但我在我的要点上回复了你，在我调用组件中的showAlert属性后，我基本上只是称setTimeout。仍然使用redux-thunk并在showAlert在此操作中分派后有超时更合适吗？考虑到目前的最佳实践，因为他们都能完成工作。 – Drew

使用redux-thunk更清洁。它打包了意图并使其可重用。另外，请确保删除之前的提醒，如果有的话。否则，如果两个警报在5秒内被触发，第二个警报将被第一个'setTimeout'关闭。 – DDS

redux中的操作是普通对象。 Redux thunk允许返回函数而不是对象。这些函数由thunk中间件执行，并且最终到达用于分派的商店的最终对象是普通对象。下面是一个redux thunked动作的例子。

来源

2016-08-20 02:18:47 vijayst

终极版，thunk是你的答案。在您的商店代码更改

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
);

到

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f, 
    applyMiddleware(thunk) 
);

，你将能够使用的thunk与终极版的行动。

参考https://github.com/gaearon/redux-thunk#installation

来源

2016-08-20 02:23:47 John

谢谢约翰。我做错了什么？下面是我一直在尝试的一个要点：https://gist.github.com/drewrawitz/231ccc56bd442dae0ce009d23cd28373 – Drew

没关系，问题出在我的商店。中间件从未被调用。我用我的新商店编辑了原来的问题，最终开始工作。 – Drew

随着终极版，形实转换，可以使操作返回一个承诺：

export const updateAlert = (alert, message) => (dispatch, getState) => { 
    dispatch ({ 
    type: 'UPDATE_ALERT', 
    alert, 
    message 
    }); 
    return Promise.resolve(getState()); 
    // or just Promise.resolve();

现在你可以调用updateAlert（XX，XX）。然后（newState => {...}）;

来源

2017-11-08 19:33:10 Phuhui

你是不是指在第二行发送'dispatch'而不是返回 – Swapnil

@Swapnil，是的。谢谢。 – Phuhui

调度操作后Redux Thunk回调？

回答

相关问题