I was also facing a similar issue, adding a parent Suspense fixed it for me. Something like this: <Suspense fallback={<Loader />}> <Component> <Suspense fallback={<Loader />}> <LazyLoadedComponentA /> </Suspense> </Component> <Component> <Suspense fallback={<Loader />}> <LazyLoadedComponentB /> </Suspense> </Component> </Suspense>
Off the top of my head, a few advantages: A lot of the time your app’s state tree could be considerably different than the UI tree Many components may need to access the same state and display it in different ways Hot reloading components will wipe out your existing component tree, including any state stored … Read more
As @Ying Zuo said, your method works only with Functional Components. To solve this problem: Instead of this line: const counter = useSelector(state => state.counter); You define the counter state like this: const mapStateToProps = state => ({ counter: state.counter }); Then for dispatching you should use it like this: const mapDispatchToProps = () => … Read more
According to the docs you are mixing up the usage of redux-logger You either need to import the specific createLogger function import { createLogger } from ‘redux-logger’ const logger = createLogger({ // …options }); Or use the default import import logger from ‘redux-logger’ And then your code should be fine const store = createStore( reducers, … Read more
Import creatBrowserHistory with curly brackets. It’s exported as a named export. // history.js import { createBrowserHistory } from “history”; export default createBrowserHistory(); Then import and use it in index. // index.js import history from “./history”; import { Provider } from “react-redux”; import store from “./store/store”; const AppContainer = () => ( <Router history={history}> <Provider store={store}> … Read more
I faced the same issue, for me it was just solved by adding AppDispatch to the type of useDispatch hook; const dispatch = useDispatch<AppDispatch>(); useEffect(() => { dispatch(getUsers()); }, []); getUsers() was my createAsyncThunk function
How to fix it You have two options: stub the dependency by hand bring in flow-typed to find the dependency type file/stub it for you I use option 2 but it is nice to know what is happening underneath Option 1 In .flowconfig, add a directory under [libs], … [libs] /type-def-libs … Now, create that … Read more
This is covered in the Redux FAQ at https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers: Many users later want to try to share data between two reducers, but find that combineReducers does not allow them to do so. There are several approaches that can be used: If a reducer needs to know data from another slice of state, the state tree … Read more
For the sake of helping future souls with this issue, it turns out that according to the linked github discussions, that version 5.0 of the history package is causing the issue and downgrading to version 4.10.1 solves the problem for me. npm install history@4.10.1 https://github.com/ReactTraining/history/issues/803 https://github.com/ReactTraining/history/issues/804
According to the doc, you can just use a normal React element instead of a function inside <Provider />. As a result, simply change your code to <Provider store={store}> <App /> </Provider> I think this has changed since react@0.14.