There is no mechanism for injecting services into reducers. Reducers are supposed to be pure functions. Instead, you should use ngrx/effects – which is the mechanism for implementing action side-effects. Effects listens for particular actions, perform some side-effect and then (optionally) emit further actions. Typically, you would split your action into three: the request; the … Read more
Think of your useEffect as a mix of componentDidMount, componentDidUpdate, and componentWillUnmount, as stated in the React documentation. To behave like componentDidMount, you would need to set your useEffect like this: useEffect(() => console.log(‘mounted’), []); The first argument is a callback that will be fired based on the second argument, which is an array of … Read more
The react hooks testing library docs go more into depth on this. However, what we essentially are missing is the provider which we can obtain by creating a wrapper. First we declare a component which will be our provider: import { Provider } from ‘react-redux’ const ReduxProvider = ({ children, reduxStore }) => ( <Provider … Read more
I’ll elaborate on the excellent answer by @phry. Instead of configuring the ignored paths, you could just increase the timeouts: const store = configureStore({ // … middleware: (getDefaultMiddleware) => getDefaultMiddleware({ immutableCheck: { warnAfter: 128 }, serializableCheck: { warnAfter: 128 }, }) }) or turn off the checks altogether: const store = configureStore({ // … middleware: … Read more
React-thunk supports passing an arbitrary object to a thunk using withExtraArgument. You can use this to dependency-inject a service object, e.g.: const bluetoothService = require(‘./blueToothService’); const services = { bluetoothService: bluetoothService }; let store = createStore(reducers, {}, applyMiddleware(thunk.withExtraArgument(services)) ); Then the services are available to your thunk as a third argument: function startDeviceScan() { return … Read more
Redux createStore 2nd param is intended for store initialization: createStore(reducer, [initialState], [enhancer]) So you can do something like this: const initialState = { id: localStorage.getItem(‘id’), name: localStorage.getItem(‘name’), loggedInAt: null }; const store = createStore(mainReducer, initialState); Since reducers should be pure functions (i.e. no side effects) and localStorage.setItem is a side effect, you should avoid saving … Read more
Your action below does not contain a type property which is required export function loadArticles() { return { types:[LOAD_ARTICLES, LOAD_ARTICLES_SUCCESS, LOAD_ARTICLES_ERROR], url:’./api/articles.json’, }; } You should modify the above code so that your action creator returns a type export function loadArticles() { return { type: LOAD_ARTICLES, url:’./api/articles.json’, }; }
By default, an ngrx/effect dispatches an action. If you want an effect to be ‘fire-and-forget’, all you need to do is add {dispatch: false} as an argument to the @Effects() decorator. From the @ngrx/effects docs: Observables decorated with the @Effect() decorator are expected to be a stream of actions to be dispatched. Pass { dispatch: … Read more
Mark’s answer is correct. Middleware executes those instructions. But this makes your life easier: in the test, you can provide whatever you want as the argument to next(), and the generator function will receive it as a result of yield. This is exactly what saga middleware does (except that it actually fires up a request … Read more
The slice object returned from createSlice includes each of the individual case reducer functions you passed in as slice.caseReducers, to help with situations like this. So, you could do: addModule(state, action) { const { moduleName, renderingData } = action.payload; if (!state.modules[moduleName]) { state.modules[moduleName] = renderingData; } WorkspacesSlice.caseReducers.setActiveModule(state, action); }, Also, reducer functions have no this, … Read more