I'm learning React/Redux, and while rewriting my redux store to better store the state and add async thunks, my app stopped rendering. My console shows no errors and the page is blank.
App.js
import './App.css'
import React from 'react'
import SearchBar from '../features/search/SearchBar'
import Post from '../components/Post'
import Subreddits from '../components/Subreddits'
import { BsReddit } from 'react-icons/bs'
const App = () => {
let listOfPosts = []
for (let i = 0; i < 5; i++){
listOfPosts.push(<Post iterator={i} />)
}
return (
<main>
<header>
<h1>
<BsReddit />
<span>Reddit</span> Minimal
</h1>
<SearchBar />
</header>
<div className='post-container'>
{listOfPosts.map((post, i) => <li key={'post_' + i}>{post}</li>)}
</div>
<Subreddits />
</main>
);
}
export default App
store.js
import { configureStore } from '@reduxjs/toolkit'
import { postsReducer } from '../features/posts/postsSlice'
import React from 'react'
export const store = configureStore({
reducer: {
posts: postsReducer
}
})
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import { store } from './app/store'
import { Provider } from 'react-redux'
const render = () => {
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
}
store.subscribe(render)
I can show more of the code, but i assume the problem is somewhere in these 3 files. I truly don't understand why its not rendering.