reactjs - Redux 可以在服务器端分派(dispatch)操作

Question

我是 redux 的初学者，并创建通用的 React redux 应用程序。

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

getOutput 是一个异步操作，它在调用时获取一些 api 并更改 redux 上的状态。

我知道使用 redux-thunk 中间件在客户端分派(dispatch)它，但不了解服务器端的过程

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

Answer 1

根据 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);
});