I'm try to use createSelector from #redux/toolkit to memoize a calcullation for the some items in the state but I'm not getting any data -not even undefined or empty array- as an output.
Inside my component
// import { createSelector } from '#reduxjs/toolkit';
const stateInstitutions = (state) => state.institutions.items;
const ins = useSelector(stateInstitutions);
const institutionsOptions = createSelector(
stateInstitutions,
// this is what I want to do
// (institutions) => institutions.map(({ name }) => ({ label: name, value: name })),
(institutions) => institutions, // just for testing
);
console.log(ins, institutionsOptions);
The log output is
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] ƒ memoized() {
var value = cache.get(arguments);
if (value === NOT_FOUND) {
// #ts-ignore
value = func.apply(null, arguments);
if (resultEqualityCheck) {
var entries…
As you can see I'm pointing to the right selector since I get the data from useSelector but not with createSelector.
Some silly error I must be doing but I'm not sure what it is.
The issue is that createSelector returns a selector. You still need to pass the selector your state.
e.g.
const stateInstitutions = (state) => state.institutions.items;
const ins = useSelector(stateInstitutions);
const institutionOptionSelector = createSelector(
stateInstitutions,
(institutions) => institutions.map(({ name }) => ({ label: name, value: name })),
);
const instOptions = useSelector(institutionOptionSelector);
console.log(ins, institutionsOptions);
Related
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
useEffect(() => {
getApiValues();
}, []);
useEffect(() => {
//problem is when enter this page from another, sometimes value1 is 0 ,but actually is not 0 .
setApiValues(value1,value2);
}, [value1,value2]);
const getApiValue1= () => {
const info = {
corpid:'corpid',
userid:'userid'
};
fetch(`url`,{
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
credentials: 'include',
body: JSON.stringify(info)
})
.then(res => res.json())
.then(json => {
if(json.result === 'succ') {
....
setvalue1(value1);
setvalue2(value2);
}
});
};
const setApiValues = () => {
.....
}
the problem is that i get data from getApiValue1 and then 2 setState , sometiems ,not everytime , value1 is set to 0 , actually is not 0 .
when setvalue2(value2) happen , value2 changed , it will trigger useEffect ,why get value1 is 0 ?
and how to fix this ?
It's not a good practice to use useEffect as a way to control the flow of your data, more about this here. Why don't you just call setApiValues instead of setvalue1 and setvalue2?
If you set the values in two separate setValueX calls, the Effect may be run for both updates as well. If you want to set both values and only run the Effect once, consider putting them in a single state object and updating them together, eg.
const [values, setValues] = useState({ value1: 0, value2: 0 })
// fetch and set values
const fetchValues = async () => {
//...
const res = await fetch('something', options)
const { value1, value2 } = await res.json()
setValues({ value1, value2 })
}
// run fetch on mount
useEffect(fetchValues, [])
I am new to Redux RTK so the problem might not exactly be on calling getSelectors(). However, when I'm using the state that comes from getSelectors() it reloads the entire state.
Problem
The baseline is that I have different Setup objects that I'm calling based on the documentId. These Setup objects are quite large so in the getSetups I am only fetching some basic properties. Then, when the user selects a specific Setup from the dropdown I want to save it in the setupSlice. But when I trigger the dispatch(setSetup(data)) the RTK reloads all the Setups.
I encounter an infinite loop when after fetching all the Setup objects I want to automatically assign the default Setup to the setupSlice.
Extra
Ideally when I assign a Setup to the setupSlice I would like to call the getSetup from RTK to fetch the entire Setup object of that specific Setup and store it in the setupSlice.
I am not sure if this is suppose to be happening but is there anyway to stop it? Otherwise is there any recommendation so I can move forward?
This is the component I'm trying to generate:
const SetupDropdown = () => {
const dispatch = useDispatch()
const { documentId } = useParams()
const { data, isFetching } = useGetSetupsQuery({ documentId })
let setupsMenu;
const { selectAll: selectAllSetups } = getSelectors({documentId})
const allSetups = useSelector(selectAllSetups)
if (!isFetching) {
const defaultSetup = allSetups.find((setup) => setup.default)
setupsMenu = allSetups.map(setup => {
return (<MenuItem value={setup.id}>{setup.name}</MenuItem>)
})
dispatch(setSetup(defaultSetup))
}
const setupId = useSelector(selectSetupId)
const handleChange = async (event) => {
// Here I ideally call the getSetup RTK Query to fetch the entire information of the single setup
const data = {
id: event.target.value,
name: 'Random name'
}
dispatch(setSetup(data))
};
return (
<FormControl sx={{ minWidth: 200 }} size="small">
<InputLabel>Setup</InputLabel>
<Select
value={setupId}
onChange={handleChange}
label="Setup"
>
{setupsMenu}
</Select>
</FormControl>
)
}
export default SetupDropdown;
This is the setupApiSlice:
const setupsAdapter = createEntityAdapter({
sortComparer: (a, b) => b.date.localeCompare(a.date)
})
const initialState = setupsAdapter.getInitialState()
export const setupsApiSlice = apiSlice.injectEndpoints({
tagTypes: ['Setup'],
endpoints: builder => ({
getSetups: builder.query({
query: ({ documentId }) => ({
url: `/documents/${documentId}/setups`,
method: 'GET'
}),
transformResponse: responseData => {
return setupsAdapter.setAll(initialState, responseData)
},
providesTags: (result, error, arg) => [
{ type: 'Setup', id: "LIST" },
...result.ids.map(id => ({ type: 'Setup', id }))
]
}),
getSetup: builder.query({
query: ({ documentId, setupId }) => ({
url: `/documents/${documentId}/setups/${setupId}`,
method: 'GET'
})
})
})
})
export const {
useGetSetupsQuery,
useGetSetupQuery
} = setupsApiSlice
// Define function to get selectors based on arguments (query) of getSetups
export const getSelectors = (
query,
) => {
const selectSetupsResult = setupsApiSlice.endpoints.getSetups.select(query)
const adapterSelectors = createSelector(
selectSetupsResult,
(result) => setupsAdapter.getSelectors(() => result?.data ?? initialState)
)
return {
selectAll: createSelector(adapterSelectors, (s) =>
s.selectAll(undefined)
),
selectEntities: createSelector(adapterSelectors, (s) =>
s.selectEntities(undefined)
),
selectIds: createSelector(adapterSelectors, (s) =>
s.selectIds(undefined)
),
selectTotal: createSelector(adapterSelectors, (s) =>
s.selectTotal(undefined)
),
selectById: (id) => createSelector(adapterSelectors, (s) =>
s.selectById(s, id)
),
}
}
This is the setupSplice:
const initialState = {
name: null,
filters: [],
data: {},
status: 'idle', //'idle' | 'loading' | 'succeeded' | 'failed'
error: null
}
const setupSlice = createSlice({
name: 'setup',
initialState,
reducers: {
setSetup: (state, action) => {
console.log('Dispatch')
const setup = action.payload;
console.log(setup)
state.id = setup.id;
state.name = setup.name;
state.filters = setup.filters;
state.data = setup.state;
state.status = 'succeeded';
}
}
})
export const { setSetup } = setupSlice.actions;
export const selectSetupId = (state) => state.setup.id;
export const selectSetupName = (state) => state.setup.name;
export const selectSetupFilters = (state) => state.setup.filters;
export const selectSetupData = (state) => state.setup.data;
export default setupSlice.reducer;
Tbh., you probably should be using selectFromResult in your useGetSetupsQuery instead of adding another useSelector hook. That would also reduce your code complexity by a lot.
Your problem as hand is that you are creating those selectors within your component on each render - so they don't have a chance to actually memoize and give you a stable result. If you do that in your component, wrap it in a useMemo call to keep your selector instances as stable as possible.
I've a stepper form, that insert data using GraphQL/Apollo and React, of two different places.
Here are the code:
export function ProjectStep({classes, nextStep}) {
const {loading, error, data} = useUserQuery();
const organizationsArray = _.get(data, "user.organizations");
const [projectName, setProjectName] = useState("");
const [organization, setOrganization] = useState("");
const [createProject, appMutationResponse] = useappInsertMutation();
const [createToken, tokenMutationResponse] = usetokenInsertMutation();
const submitForm = () => {
const variables = {name: projectName, orgId: organization, description: ""};
createProject({variables});
};
const submitToken = () => {
const variables = {
enable: true,
lastUsed: Date.now().toString(),
appId: appMutationResponse.data.appInsert.id,
orgId: appMutationResponse.data.appInsert.orgId,
};
createToken({variables});
};
if (appMutationResponse.data) {
submitToken();
}
}
The first insert is on:
const submitForm = () => {
const variables = {name: projectName, orgId: organization, description: ""};
createProject({variables});
};
The second insert is on:
const submitToken = () => {
const variables = {
enable: true,
lastUsed: Date.now().toString(),
appId: appMutationResponse.data.appInsert.id,
orgId: appMutationResponse.data.appInsert.orgId,
};
createToken({variables});
};
These events are called in a button:
<Button variant="contained" color="primary" type='button' onClick={submitForm}>
Next
</Button>
But, when i click on the button, i got this error:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
When a go to my database, i see that 50 tokens are saved using this part of the code in a single call:
const submitToken = () => {
const variables = {
enable: true,
lastUsed: Date.now().toString(),
appId: appMutationResponse.data.appInsert.id,
orgId: appMutationResponse.data.appInsert.orgId,
};
createToken({variables});
};
I think that because i'm using a hook, i got a response and that response bring that error to me, the question is, why i'm saving and receiving in a single call, 50 tokens?
You have written below code directly in render, so when the appMutationResponse.data is available if calls the submitToken function which triggers a re-render and then the function is called again causing an infinite loop.
if (appMutationResponse.data) {
submitToken();
}
The solution is to put this code in useEffect and run it on data change
useEffect(() => {
if (appMutationResponse.data) {
submitToken();
}
}, [appMutationResponse.data])
I am getting a response from an Api that looks like this:
property: Array(100)
0: {identifier: {…}, address: {…}, location: {…}, vintage: {…}}
1: {identifier: {…}, address: {…}, location: {…}, vintage: {…}}
2: {identifier: {…}, address: {…}, location: {…}, vintage: {…}}
3: {identifier: {…}, address: {…}, location: {…}, vintage: {…}}
I am wanting a list of some specified fields in the address object for instance just country and oneLine, but for every index of the property
array
address:
country: "US"
countrySubd: "CA"
line1: "1702 ELKHORN RD"
line2: "ROYAL OAKS, CA 95076"
locality: "Royal Oaks"
matchCode: "ExaStr"
oneLine: "1702 ELKHORN RD, ROYAL OAKS, CA 95076"
postal1: "95076"
postal2: "9218"
postal3: "R002"
I have been struggling for 2 days on how to write the schema for this in my graphql schema page. Can somebody please help me?
here is what I have been trying but keep getting null value for data
require("es6-promise").polyfill();
require("isomorphic-fetch");
const {
GraphQLString,
GraphQLList,
GraphQLSchema,
GraphQLObjectType,
GraphQLInt
} = require("graphql");
const Identifier = new GraphQLObjectType({
name: "identifier",
fields: () => ({
obPropId: { type: GraphQLInt }
})
});
const AddressType = new GraphQLObjectType({
name: 'Address',
fields: () => ({
country: { type: GraphQLString },
oneLine: {type: GraphQLString }
})
})
const RootQuery = new GraphQLObjectType({
name: "RootQueryType",
fields: {
property: {
type: new GraphQLList(Identifier),
resolve(parent, args) {
return fetch(
"https://api.gateway.attomdata.com/propertyapi/v1.0.0/property/address?postalcode=95076&page=1&pagesize=100",
{
headers: {
Accept: "application/json",
APIKey: "XXXXXXXXXXXXXXXXXXXX"
}
}
)
.then((response) => {
const jsonResponse = response.json();
return jsonResponse
}).then((jsonResonse) => console.log(JSON.stringify(jsonResonse)))
.then(res => res.data)
.catch(error => {
console.log(error);
});
}
}
}
});
module.exports = new GraphQLSchema({
query: RootQuery
});
Im running it on a express server and do my checks on localhost:5000/graphql
In the comments we were able to work out the following:
Another type is required to connect the Address type with the RootQuery type. We can introduce the type and adjust the return type of the query type:
type Property {
id: Identifier
address: Address
}
type Query {
property: [Property] # consider using plural field name "properties"
}
I created a working Codesandboy to show how it behaves.
I want to test an effect that works as follows:
Effect starts if LoadEntriesSucces action was dispatched
It waits for 5 seconds
After 5 seconds passes http request is send
When response arrives, new action is dispatched (depending, whether response was succes or error).
Effect's code looks like this:
#Effect()
continuePollingEntries$ = this.actions$.pipe(
ofType(SubnetBrowserApiActions.SubnetBrowserApiActionTypes.LoadEntriesSucces),
delay(5000),
switchMap(() => {
return this.subnetBrowserService.getSubnetEntries().pipe(
map((entries) => {
return new SubnetBrowserApiActions.LoadEntriesSucces({ entries });
}),
catchError((error) => {
return of(new SubnetBrowserApiActions.LoadEntriesFailure({ error }));
}),
);
}),
);
What I want to test is whether an effect is dispatched after 5 seconds:
it('should dispatch action after 5 seconds', () => {
const entries: SubnetEntry[] = [{
type: 'type',
userText: 'userText',
ipAddress: '0.0.0.0'
}];
const action = new SubnetBrowserApiActions.LoadEntriesSucces({entries});
const completion = new SubnetBrowserApiActions.LoadEntriesSucces({entries});
actions$ = hot('-a', { a: action });
const response = cold('-a', {a: entries});
const expected = cold('- 5s b ', { b: completion });
subnetBrowserService.getSubnetEntries = () => (response);
expect(effects.continuePollingEntries$).toBeObservable(expected);
});
However this test does not work for me. Output from test looks like this:
Expected $.length = 0 to equal 3.
Expected $[0] = undefined to equal Object({ frame: 20, notification: Notification({ kind: 'N', value: undefined, error: undefined, hasValue: true }) }).
Expected $[1] = undefined to equal Object({ frame: 30, notification: Notification({ kind: 'N', value: undefined, error: undefined, hasValue: true }) }).
Expected $[2] = undefined to equal Object({ frame: 50, notification: Notification({ kind: 'N', value: LoadEntriesSucces({ payload: Object({ entries: [ Object({ type: 'type', userText: 'userText', ipAddress: '0.0.0.0' }) ] }), type: '[Subnet Browser API] Load Entries Succes' }), error: undefined, hasValue: true }) }).
What should I do to make this test work?
Like mentioned in another answer, one way to test that effect would be by using the TestScheduler but it can be done in a simpler way.
We can test our asynchronous RxJS code synchronously and deterministically by virtualizing time using the TestScheduler. ASCII marble diagrams provide a visual way for us to represent the behavior of an Observable. We can use them to assert that a particular Observable behaves as expected, as well as to create hot and cold Observables we can use as mocks.
For example, let's unit test the following effect:
effectWithDelay$ = createEffect(() => {
return this.actions$.pipe(
ofType(fromFooActions.doSomething),
delay(5000),
switchMap(({ payload }) => {
const { someData } = payload;
return this.fooService.someMethod(someData).pipe(
map(() => {
return fromFooActions.doSomethingSuccess();
}),
catchError(() => {
return of(fromFooActions.doSomethinfError());
}),
);
}),
);
});
The effect just waits 5 seconds after an initial action, and calls a service which would then dispatch a success or error action. The code to unit test that effect would be the following:
import { TestBed } from "#angular/core/testing";
import { provideMockActions } from "#ngrx/effects/testing";
import { Observable } from "rxjs";
import { TestScheduler } from "rxjs/testing";
import { FooEffects } from "./foo.effects";
import { FooService } from "../services/foo.service";
import * as fromFooActions from "../actions/foo.actions";
// ...
describe("FooEffects", () => {
let actions$: Observable<unknown>;
let testScheduler: TestScheduler; // <-- instance of the test scheduler
let effects: FooEffects;
let fooServiceMock: jasmine.SpyObj<FooService>;
beforeEach(() => {
// Initialize the TestScheduler instance passing a function to
// compare if two objects are equal
testScheduler = new TestScheduler((actual, expected) => {
expect(actual).toEqual(expected);
});
TestBed.configureTestingModule({
imports: [],
providers: [
FooEffects,
provideMockActions(() => actions$),
// Mock the service so that we can test if it was called
// and if the right data was sent
{
provide: FooService,
useValue: jasmine.createSpyObj("FooService", {
someMethod: jasmine.createSpy(),
}),
},
],
});
effects = TestBed.inject(FooEffects);
fooServiceMock = TestBed.inject(FooService);
});
describe("effectWithDelay$", () => {
it("should dispatch doSomethingSuccess after 5 seconds if success", () => {
const someDataMock = { someData: Math.random() * 100 };
const initialAction = fromFooActions.doSomething(someDataMock);
const expectedAction = fromFooActions.doSomethingSuccess();
testScheduler.run((helpers) => {
// When the code inside this callback is being executed, any operator
// that uses timers/AsyncScheduler (like delay, debounceTime, etc) will
// **automatically** use the TestScheduler instead, so that we have
// "virtual time". You do not need to pass the TestScheduler to them,
// like in the past.
// https://rxjs-dev.firebaseapp.com/guide/testing/marble-testing
const { hot, cold, expectObservable } = helpers;
// Actions // -a-
// Service // -b|
// Results // 5s --c
// Actions
actions$ = hot("-a-", { a: initialAction });
// Service
fooServiceMock.someMethod.and.returnValue(cold("-b|", { b: null }));
// Results
expectObservable(effects.effectWithDelay$).toBe("5s --c", {
c: expectedAction,
});
});
// This needs to be outside of the run() callback
// since it's executed synchronously :O
expect(fooServiceMock.someMethod).toHaveBeenCalled();
expect(fooServiceMock.someMethod).toHaveBeenCalledTimes(1);
expect(fooServiceMock.someMethod).toHaveBeenCalledWith(someDataMock.someData);
});
});
});
Please notice that in the code I'm using expectObservable to test the effect using the "virtual time" from the TestScheduler instance.
you could use the done callback from jasmine
it('should dispatch action after 5 seconds', (done) => {
const resMock = 'resMock';
const entries: SubnetEntry[] = [{
type: 'type',
userText: 'userText',
ipAddress: '0.0.0.0'
}];
const action = new SubnetBrowserApiActions.LoadEntriesSucces({entries});
const completion = new SubnetBrowserApiActions.LoadEntriesSucces({entries});
actions$ = hot('-a', { a: action });
const response = cold('-a', {a: entries});
const expected = cold('- 5s b ', { b: completion });
subnetBrowserService.getSubnetEntries = () => (response);
effects.continuePollingEntries$.subscribe((res)=>{
expect(res).toEqual(resMock);
done()
})
});
The second notation doesn't work with jasmine-marbles, use dashes instead:
const expected = cold('------b ', { b: completion });
You will need to do 3 things
1- Inside your beforeEach, you need to override the internal scheduler of RxJs as follows:
import { async } from 'rxjs/internal/scheduler/async';
import { cold, hot, getTestScheduler } from 'jasmine-marbles';
beforeEach(() => {.....
const testScheduler = getTestScheduler();
async.schedule = (work, delay, state) => testScheduler.schedule(work, delay, state);
})
2- Replace delay, with delayWhen as follows:
delayWhen(_x => (true ? interval(50) : of(undefined)))
3- Use frames, I am not really sure how to use seconds for this, so I used frames. Each frame is 10ms. So for example my delay above is 50ms and my frame is -b, so that is the expected 10 ms + I needed another 50ms so this equals extra 5 frames which was ------b so as follows:
const expected = cold('------b ', { b: outcome });