我是redux的初学者并创建了通用的react redux应用程序。
这是在服务器端调度异步操作的任何选项,如服务器端的store.dispatch(actions.getOutput())
。
getOutput是一个异步操作,可以在调用时获取一些api并在redux上更改状态。
我知道在客户端使用redux-thunk中间件发送它但不了解服务器端的进程
let context = {},
status = 200;
const allReducers = combineReducers({
...reducers
});
const store = createStore(
allReducers,
compose(
applyMiddleware(thunkMiddleware, promise)
)
);
const preloadedStore = store.getState()
store.dispatch(actions.getStories());
const finalState = store.getState();
const ctx = ReactDomServer.renderToString(
<Provider store={store}>
<StaticRouter context={context} location={req.url}>
<App/>
</StaticRouter>
</Provider>
),
reactHelmet = ReactHelmet.renderStatic();
if(context.url){
return res.redirect(302, context.url);
}
if(context.status === 404){
status = 404;
}
let page = renderOutput(ctx, finalState, reactHelmet);
res.status(status).send(page);
答案 0 :(得分:3)
从redux-thunk的文档中,如果你定义你的动作:
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dr4').change(function () {
console.log("change");
var name1q=$(this).val();
$('input[type="checkbox"]').click(function () {
console.log("Click");
if ($(this).prop("checked") == true)
{
var data1 = $(this).val();
$.ajax({
type: "POST",
url: "catup123_1.php",
data: {"ajay": data1,"ajay12":name1q},
success: function (html) {
$("#load2222").html(html);
}
});
}
});
});
});
</script>
然后你可以像这样使用它
function makeASandwichWithSecretSauce(forPerson) {
// Invert control!
// Return a function that accepts `dispatch` so we can dispatch later.
// Thunk middleware knows how to turn thunk async actions into actions.
return function (dispatch) {
return fetchSecretSauce().then(
sauce => dispatch(makeASandwich(forPerson, sauce)),
error => dispatch(apologize('The Sandwich Shop', forPerson, error))
);
};
}
这意味着,在服务器端你可以做到
store.dispatch(
makeASandwichWithSecretSauce('My wife')
).then(() => {
console.log('Done!');
});