Having issues when trying to implement useSelector(). It is giving me the error:
"Property 'clientsReducer' does not exist on type 'DefaultRootState'.ts(2339)"
Usually, I've done mapStatetoProps so first time trying it this way. I've watched a few tutorials and they all seem to set it up the same way I am without issue.
ClientsScreen.js
export default function ClientsScreen ({navigation}){
const {clients} = useSelector(state => state.clientsReducer)
const dispatch = useDispatch()
const fetchClients = () => dispatch(getClients());
useEffect(() => {
fetchClients();
}, []);
store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index.js';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
applyMiddleware(...middleware)
);
export default store;
reducers/clients.js
import { GET_CLIENTS } from "../actions/types";
const initialState = {
clients: []
}
function clientsReducer(state = initialState, action){
switch(action.type){
case GET_CLIENTS:
return{
...state,
clients: action.payload,
};
default:
return state;
}
}
export default clientsReducer;
reducers/index.js
import { combineReducers } from 'redux';
import auth from './auth';
import clientsReducer from './clients'
const rootReducer = combineReducers({
clientsReducer
});
export default rootReducer;
App.js
export default function App() {
return (
<Provider store={store}>
<NavigationContainer>
<Drawer.Navigator
drawerContent={props => <DrawerContent {...props} />}
screenOptions={{
headerStyle:{
backgroundColor: '#fff',
},
headerTintColor: 'black',
headerTitleAlign: 'right',
headerTitle: () => (
<Image
style={{width: 100, height: 25}}
source={require('./assets/logo.png')}
/>
),
}}
>
<Drawer.Screen name="Main" component={MainTabScreen}/>
{/* <Drawer.Screen name="Details" component={DetailsScreen} /> */}
</Drawer.Navigator>
</NavigationContainer>
</Provider>
);
}