redux
How to exclude / disable Redux devtools in production build or disconnect?
For hiding the Redux from devtools pay attention to the following code: import { createStore, applyMiddleware, compose } from ‘redux’; import createSagaMiddleware from ‘redux-saga’; import reducer from ‘~/redux/reducers’; import mySaga from ‘~/redux/sagas’; import { nodeEnv } from ‘~/utils/config’; const composeEnhancers = (nodeEnv !== ‘production’ && typeof window !== ‘undefined’ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; const sagaMiddleware … Read more
What’s the maximum memory size of the redux store?
Open “More Tools” -> “Task Manager” in Chrome. Open the twitter web app and find the tab in Task Manager. Mine started at 120MB. Start scrolling and see how long it takes to crack 500MB. I know it’s not directly related to data stored in Redux considering most of it is gifs, etc, but it … Read more
React-Typescript: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’
react-router v6 doesn’t use RouteComponentProps anymore. Here are some links with examples on how to change route and how to use params on v6 with some links where you can find more informations: For changing route (old history.push) If you want to change the route after the login is successful react-router docs specify In v6, … Read more
How do I use Jasmine to spy on a function that is imported via an ES6 default export?
You say you tried importing the wildcard and spying on default? What was the issue with that approach? I just ran into this problem and doing this solved it for me: import * as widget from ‘./widget’; describe(‘widget spec’, () => { beforeEach(() => { spyOn(widget, ‘default’); }); });
Async actions in Redux
I think you should be using compose function, so it’s like import { createStore, applyMiddleware, compose } from ‘redux’; import thunk from ‘redux-thunk’; import duedates from ‘./reducers/duedates’ export default compose(applyMiddleware(thunk))(createStore)(duedates); Thunk allows an action creator to return a function instead of plain-object, so you use it like export function getDueDates() { return dispatch => { … Read more
confusion about `useSelector` and `createSelector` with Redux toolkit
A “selector” is any function that accepts the Redux state tree as an argument, and returns some extracted or derived data. That includes plain functions like you showed. In many cases, you want to memoize the calculation of the results, such as mapping over an array of items, so that it’s not re-calculated unless the … Read more
Can I access state inside a createAsyncThunk w/axios with redux toolkit?
The async function consumes a “payload” argument, and secondly a thunkAPI object that contains a getState method. payloadCreator thunkAPI: an object containing all of the parameters that are normally passed to a Redux thunk function, as well as additional options: dispatch: the Redux store dispatch method getState: the Redux store getState method extra: the “extra … Read more
Getting warning message ‘getDefaultMiddleware’ is deprecated
The middleware option in configureStore accepts a callback function, and that callback will be given getDefaultMiddleware as its argument: const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger), }) Use that instead of the separately imported version.
Cleaner/shorter way to update nested state in Redux?
UPD: it’s now a part of the ES2018 It might be slightly improved via a non-standardised yet properties spread syntax: return { …state, notificationBar: { …state.notificationBar, open: true, }, };