I have been attempting to troubleshoot this code for quite some time now, but I am struggling to identify the issue at hand. My main goal is to establish a connection between my top-level application and the redux store. However, every time I try, the store ends up empty and I can't figure out why. Below is the code snippet in question:
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { App } from './App';
import { Store } from 'redux';
import createStore from './model/configureStore';
import { State } from './model/types';
const store: Store<State> = createStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
App.tsx
import React from 'react';
import { State } from './model/types';
import { connect } from 'react-redux';
export const App:React.FunctionComponent = (props) => {
console.log(props);
return <div>Hello</div>;
};
const mapStateToProps = (state: State) => ({
isLoading: state.isLoading,
});
export default connect(mapStateToProps)(App);
(The console log above returns an empty object, for reasons unknown).
loading.ts
import { BooleanAction } from '../utils/redux-utils';
const IS_LOADING = 'IS_LOADING_GENERAL';
export const setIsLoading = (payload: boolean) =>
<BooleanAction>{
type: IS_LOADING,
payload,
};
const defaultState = true;
export const reducer = (
state: boolean = defaultState,
action: BooleanAction
) => {
switch (action.type) {
case IS_LOADING:
return action.payload;
default:
return state;
}
};
combineReducers.ts
import { ReducersMapObject, combineReducers } from 'redux';
import { reducer as isLoading } from './loading';
import { State } from './types';
const reducerMap: ReducersMapObject<State> = {
isLoading,
};
export default combineReducers<State>(reducerMap);
configureStore.ts
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './combineReducers';
export default () => createStore(rootReducer, applyMiddleware(thunk));
The code appears to be correct to me, yet it does not produce the desired outcome. Interestingly, if I avoid wrapping my app in the <Provider> during the ReactDOM.render() process, everything works fine. However, I require the <Provider> to manage loading states at the top level. I appreciate any assistance on this matter!
Thank you in advance!!