Redux可能在服务器端调度操作

时间:2017-05-31 11:10:45

标签: reactjs redux redux-thunk

我是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);

1 个答案:

答案 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!');
});