SSR Реагирует с данными для избыточного хранилища

Question

Насколько возможно заполнить хранилище (на стороне сервера) уже извлеченными данными без запуска API (dispatch(action))?

Шаги:

1. Клиент идет на сайтсо ссылкой /users
2. На сервере я беру /users и передаю его StaticRouter
3. На этом шаге документация говорит, что мне нужно отправить все действия (функция aka)loadData) рекурсивно во всех компонентах (специфичных для этого маршрута) и сохраняйте извлеченные данные в хранилище с избыточностью.

Но у меня уже есть все необходимые данные для этого, и я не хочу запускать API.

Заранее благодарим за любую помощь.

Answer 1

Вы можете создать состояние приложения вручную, используя существующие данные, и создать хранилище редуксов из этого состояния приложения и передать его на стороне клиента в глобальной переменной.

Затем сторона клиента будет читатьсостояние и регидратируйте запас редукции.Ниже приводится непроверенная иллюстрация этого:

Сторона сервера

// ...
// import stuff from places
// ...

// Readily available user data
const users = [{ "_id": 1000, "name": "John Doe" }, { "_id": 2000, "name": "Jane Brown" }];

app.get('/users', (req, res) => {

    const context = {};

    // Manually construct the redux state
    const state = { users: users };

    // Create redux store with existing state
    const store = createStore(
        JSON.stringify(state)
    );

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

    res.end(`
        <div id="app">${ reactDomString }</div>
        <script>
            window.REDUX_DATA = ${ JSON.stringify(state) }
        </script>
        <script src="./app.js"></script>
    `);
});

Сторона клиента

// ...
// import stuff from places
// ...

// Pick up the data from the SSR template
const store = createStore(window.REDUX_DATA);
const appContainer = document.getElementById("app");
ReactDOM.hydrate(
    <ReduxProvider store={store}>
        <Router>
            <Layout />
        </Router>
    </ReduxProvider>, 
    appContainer
);