SSR с Create-React-App, Express, Redux и React-Router - PullRequest
Новая
       21

SSR с Create-React-App, Express, Redux и React-Router

0 голосов
/ 24 декабря 2018

У нас есть приложение React, которое мы хотели сделать изоморфным (SSR).мы используем Redux Deeply.все запросы xhr проходят через действия Redux и экономят на редукторах.

У меня есть вопросы о реакции ssr.

1. Должен ли я использовать изоморфную выборку для этого потока?или вместо этого я могу использовать axios?

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

У нас есть страницы, которые хотели, чтобы urlParams отправлял действия.

вот наш сервер Express Файл: 

import cStore from './store'

app.use(express.static(path.resolve(__dirname, "../dist")));
app.use('/public', express.static(path.resolve(__dirname, "../public")));
app.use(cors())
app.get("*", (req, res, next) => {


    
    const store = cStore();

    const context = {};
    const dataRequirements =
        routes
            .filter(route => matchPath(req.url, route)) // filter matching paths
            .map(route => route.component) // map to components
            .filter(comp => comp.fetchMe) // check if components have data requirement
            .map(comp => {
                comp.fetchMe(store, req.params[0])
            }); // dispatch data requirement

, как вы можете видеть из приведенного выше фрагмента. Я отправляю действие fetchMe на каждый маршрут и отправляю store и url на сопоставленный компонент и сохраняем store.getState () в window.REDUX_DATA

вот один из моих компонентов fetchMe действий: 

Tour.fetchMe = (store, obj) => {
    let tourId = obj.split("/").pop() //split last part of url that show me tourId
    store.dispatch(fetchTourData(tourId))
}

вот мой файл store.js, от которого я отправляю действия оттуда, и функция cStore, объединяющая редукторы и создающая избыточное хранилище, находится здесь: 

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import { fetchToursIso } from "./store/isomorphic/api";


const storeTourData = (res) => ({
    type: "FETCH_TOUR_FULFILLED",
    payload: res,
});


const tourReducer = (state = [], action) => {
    switch (action.type) {
        case "FETCH_TOUR_FULFILLED":
            return action.data;
        default: return state;
    }
};



export const fetchTourData = (tourId) => (dispatch) => {
    fetchToursIso(tourId).then(res => {
        dispatch(storeTourData(res))
    })
};

const reducer = combineReducers({
    tour: tourReducer,


});

export default (initialState) =>
    createStore(reducer, initialState, applyMiddleware(thunkMiddleware));

Является ли этот поток правильным?или я должен использовать другой метод для этого.

Спасибо.

...