首页 文章

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

提问于
浏览 次
2

我是redux的初学者，并创建了通用的react redux应用程序 .

这是在服务器端调度异步操作的任何选项，如服务器端的 store.dispatch(actions.getOutput()) .

getOutput是一个 asynchronous 动作，它在调用时获取一些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);
reactjs redux redux-thunk

1 回答

  • 3

    从redux-thunk的文档中，如果你定义你的动作：

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

    这意味着，在服务器端你可以做到

    store.dispatch(makeASandwichWithSecretSauce("My wife")).then(() => {

  const ctx = ReactDomServer.renderToString(
    <Provider store={store}>
      <StaticRouter context={context} location={req.url}>
        <App />
      </StaticRouter>
    </Provider>
  );

  const reactHelmet = ReactHelmet.renderStatic();

  const page = renderOutput(ctx, finalState, reactHelmet);

  res.status(status).send(page);
});
    回复于

相关问题