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));
этот поток правильный? или я должен использовать другой метод для этого.
Благодарю.