Может ли React 18 хорошо работать с react-redux и react-router?
Мое текущее реагирующее приложение имеет следующие версии:
react 17.0.x
react-dom 17.0.x
react-redux 7.2.x
react-router-dom 5.x.x
react-scripts 4.0.x
redux 4.x.x
Итак, моим первым шагом к обновлению до react@18 было обновление react-scripts до 5.0, затем я обновил react и react-dom до 18.x (а также @types для каждого).
Теперь мой основной файл записи выглядит так:
ReactDOM.render(
<Provider store = {store}>
<App />
</Provider>,
document.getElementbyId("root")
);
Затем загружается мой <App />, который выглядит так:
const App = () => {
<ConfigureProvider ... >
<ConnectedRouter history = {history}>
<Switch>
<Router ... />
</Switch>
</ConnectedRouter>
</ConfigureProvider>
}
...
export default connect(mapStateToProps)(App);
Я знаю, что мне нужно изменить это, чтобы использовать createRoot, но поддерживает ли createRoot передачу Provider из react-redux?
Могу ли я продолжить это обновление и по-прежнему использовать react-redux, redux и react-router-dom, или какая-либо из этих библиотек больше не совместима с React 18? Я не знаю, как настроить Provider.
Ответы 1
Я знаю, что должен изменить это, чтобы использовать
createRoot, но неcreateRootподдержите меня вProviderотreact-redux?
React 18 не изменил принцип работы JSX, просто визуализируйте компонент redux Provider там, где он вам нужен, например. обертывание компонента App.
import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";
const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);
root.render(
<StrictMode>
<Provider store = {store}>
<App />
</Provider>
</StrictMode>
);
Могу ли я продолжить это обновление и по-прежнему использовать
react-redux,reduxиreact-router-domили какая-либо из этих библиотек просто несовместима больше с React 18?
Да, вы можете продолжить обновление и использовать react-redux/redux, хотя в настоящее время рекомендуется установить и использовать Redux Toolkit (@reduxjs/toolkit), поскольку он значительно сокращает объем стандартного кода, который вам нужно писать вручную (IDK, at не менее 50%, а может и больше).
Только React 18 и версии react-router-dom до версии 5.3.3 будут иметь проблемы, и только если вы визуализируете приложение в компонент React StrictMode (что и должно быть). Смотрите мой ответ здесь по проблеме и решению. Это не проблема в [email protected] и за ее пределами.
Если вы продолжите обновление react-router-dom с v5 до v6, у вас будет веселая поездка. 🙃 В RRDv6 было внесено множество критических изменений и новых шаблонов маршрутизации/маршрутизации. Обязательно внимательно прочитайте как Обзор , так и Руководство по обновлению с версии 5, чтобы увидеть, что, вероятно, будет фундаментально радикальным изменением, если вы еще не познакомились с версией 6. В этом нет ничего сложного, но, исходя из опыта, мне пришлось «отучиться» от многих привычек и концепций RRDv5.
так что последняя версия v5 будет работать с реакцией 18?
@Blankman Да, react-router-dom@5 последний хорошо работает с react@18.
@Blankman Если вы уже хорошо знакомы с React и Redux, то переход к redux-toolkit был больше похож на перепрыгивание через трещину в тротуаре. Интеграция заняла около 10-15 минут в первый раз, когда я «мигрировал» проект, и только потому, что я делал это медленно, шаг за шагом, через документы. Это было безболезненно. Вам действительно нужно всего лишь заменить старую функцию createStore на более простую в использовании функцию configureStore RTK, все существующие действия / редьюсеры работают одинаково, и вы обновляете устаревший код сокращения до текущего кода сокращения на досуге.
переход на Redux Toolkit может стать огромным рефакторингом... пока не готов к этому! Возможно, я не обновлю react-router-dom до v6, так как хочу сначала перейти в стабильное состояние, спасибо!