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

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

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

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

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

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

вот наш Экспресс сервер Файл:

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

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

Благодарю.

0 ответов

Другие вопросы по тегам