react-redux

Use history.push in action creator with react-router-v4?

Instead of using BrowserRouter you could use the Router with custom history like import { Router } from ‘react-router’ import createBrowserHistory from ‘history/createBrowserHistory’ export const history = createBrowserHistory() <Router history={history}> <App/> </Router> in which case your history.push() will work. With BrowserRouter history.push doesn’t work because Creating a new browserHistory won’t work because <BrowserRouter> creates its … Read more

Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux

This is more likely a problem from redux-persist. redux-toolkit provide few default middleware within it’s getDefaultMiddleware import { getDefaultMiddleware } from ‘@reduxjs/toolkit’; You can disable each middleware by providing false flag. To remove serializableCheck const customizedMiddleware = getDefaultMiddleware({ serializableCheck: false }) For details check redux-toolkit documentation. [2021/10/07] edit: To learn more about why this error … Read more

How do I access store state in React Redux?

You should create separate component, which will be listening to state changes and updating on every state change: import store from ‘../reducers/store’; class Items extends Component { constructor(props) { super(props); this.state = { items: [], }; store.subscribe(() => { // When state will be updated(in our case, when items will be fetched), // we will … Read more

Stop useEffect from running on mount

You can’t configure it out of the box. But, a common pattern is to use some isMounted flag like so: // Is Mounted const useFetchNotOnMount = () => { … const isMounted = useRef(false); useEffect(() => { if (isMounted.current) { console.log(‘fetching’); dispatch(fetchData(filters)); } else { isMounted.current = true; } }, [dispatch, filters]); }; // Same … Read more

How to reset TabNavigator when user logs out (from other screen)

This should work in most cases: componentWillReceiveProps(nextProps) { if ( nextProps.token == undefined || _.isNil(nextProps.token) ) { let action = NavigationActions.reset({ index: 0, key: null, actions: [ NavigationActions.navigate({routeName: ‘Auth’}) ] }); nextProps.navigation.dispatch(action); } … } Or try by enhancing your navigator with custom action: const changeAppNavigator = Navigator => { const router = Navigator.router; const … Read more