This is how one subscribes the store to render in React 16. That happens to be the versions use for the Recipe app at:
[Redux Recipe Project]
(https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-redux/modules/wdcp-22-core-redux-api-151207ea-30ea-4ddf-9468-2007b8237218/lessons/strategies-for-complex-state/exercises/review) – This app is using react-16-full.min.js
React 16 generated index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { App }from './app/App.jsx' //the following two imports add by me
import { store } from './app/store.js'
//declare a render function
const render = () => {
ReactDOM.render(
<React.StrictMode>
<App
state={store.getState()}
dispatch={store.dispatch}
/>
</React.StrictMode>
,
document.getElementById('root')
)
}
store.subscribe(render); //this works
render();
But in index.js, React 18 by default renders the code below. If you use the above version in React 18, your project will run as a React 17 project. So how does one do the same thing using the React 18 version? I have tried various combination which did not work.
React 18 generated Index.js
import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { App }from './app/App.jsx' //the following two imports add by me
import { store } from './app/store.js'
const container = document.getElementById('root')
const root = createRoot(container)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)