the saga like below.
function *callUserAuth(action) {
const selectAllState = (state) => state;
const tmp = yield select(selectAllState);
console.log(tmp);
}
the console show
enter image description here
how can i get state like
getState["userLoginReducer","isLogin"] in redux ?
i had tried to code like below.
const tmp = yield select(selectAllState._root.entries);
but error is
index.js:1 TypeError: Cannot read property 'entries' of undefine
It seems you are using Immutable.js for your redux state.
The select effect doesn't convert your Immtuable structure to plain javascript. So you need to use methods of Immutable to get to the values you want. To get the whole Immutable state and then convert it to plain javascript object you can do:
function *callUserAuth(action) {
const selectAllState = (state) => state;
const tmp = yield select(selectAllState);
console.log(tmp.toJS());
}
But generally you will probably want to have selectors to get a subset like the isLogin value. In that case you can do this instead:
function *callUserAuth(action) {
const getIsLogin = (state) => state.get('userLoginReducer').get('isLogin');
const isLogin = yield select(getIsLogin);
console.log(isLogin);
}
Related
Is there a way to pass in an object to the first param of createResource? For example: I am trying the following and it is not working:
const [val] = createResource(props, req);
I have also tried a few other things including the following:
const [val] = createResource(signal(), req);
const [val] = createResource(["foo","bar"], req);
const [val] = createResource(merged, req);
For the source argument of createResource to be reactive, you need to pass a function that is reading from a signal. Then the createResource will be able to track it and refetch when it changes.
const [data] = createResource(() => ({ ...props }), fetcher);
Here I'm destructuring props object to read all of its properties within the tracking scope of the source function.
Playground demo
Here's a longer explanation for someone like whose unable to grasp the answer in the first go:
You can define two signals:
const [state1, setState1] = createSignal("");
const [state2, setState2] = createSignal("");
You need to create a function that derives the state from those signals:
const derivedState = () => {
console.log('func called')
return {value1: state1(), value2: state2()}
}
You can then use it with your fetcher in createResource:
const [data] = createResource(derivedState, fetcherFunction);
This is what an example signature for the fetcher looks like:
async function fetcherFunction(derivedState: {
value1: string;
value2: string;
}) {
...
I have a function which creates a sublist from a large(very large list). After creating this list, the function goes on treating it (deleting duplicates, sorting...).
As long as the list was not too big, it worked fine. But now, I get "The Getter length was called on null". I suppose, it's because the second part of the function (after the loop) starts before the sublist is completed... so it doesn't work...
How can we force the function to wait for the loop to be over to continue the rest of the treatment ?
Is it with Async /Await ? Or can we do something like "While... something is not over...", or "As soon as something is done... do that" ? (My suggestions might be naive, but I am a beginner...)
Here is the code :
List themeBankFr() {
List<Map> themeBankFr = [];
for (Word word in wordBank) {
for (Thematique wordTheme in word.theme) {
themeBankFr.add({
'themeFr': wordTheme.themeFr,
'image': wordTheme.image,
});
}
}
// convert each item to a string by using JSON encoding
final jsonList = themeBankFr.map((item) => jsonEncode(item)).toList();
// using toSet - toList strategy
final uniqueJsonList = jsonList.toSet().toList();
// convert each item back to the original form using JSON decoding
final result = uniqueJsonList.map((item) => jsonDecode(item)).toList();
// sort the list of map in alphabetical order
result.sort((m1, m2) {
var r = m1['themeFr'].compareTo(m2['themeFr']);
if (r != 0) return r;
return m1['image'].compareTo(m2['image']);
});
return result;
}
i think i have a good answer that may helps you and it will as following
first create another function to do the work of for loops and this function returns a future of list that you need like below
Future<List<Map>> futureList(List wordBank){
List<Map> themeBankFr = [];
for (Word word in wordBank) {
for (Thematique wordTheme in word.theme) {
themeBankFr.add({
'themeFr': wordTheme.themeFr,
'image': wordTheme.image,
});
}
}
return Future.value(themeBankFr);
}
after that you can use this function inside your code and use it as async await and now you will never run the below lines before you return this array like below
List themeBankFr() async {
List<Map> themeBankFr = await futureList(wordBank);
// convert each item to a string by using JSON encoding
final jsonList = themeBankFr.map((item) => jsonEncode(item)).toList();
// using toSet - toList strategy
final uniqueJsonList = jsonList.toSet().toList();
// convert each item back to the original form using JSON decoding
final result = uniqueJsonList.map((item) => jsonDecode(item)).toList();
// sort the list of map in alphabetical order
result.sort((m1, m2) {
var r = m1['themeFr'].compareTo(m2['themeFr']);
if (r != 0) return r;
return m1['image'].compareTo(m2['image']);
});
return result;
}
i think this will solve your problem and i hope this useful for you
I've built a simple react application with a searchbar component. The searchbar component contains an <Input>. For testing I'm using Jest with React Testing Library. I wrote the test below which passes but for some reason this warning appears:
Property 'value' does not exist on type 'HTMLElement'.
It's referring searchInput.value in the code below. How can I deal with this warning?
Searchbar.test.tsx
test("SearchBar value is read", () => {
const handleSearchRequest = jest.fn();
render(<SearchBar searchInputValue="Hello World"/>);
const searchInput = screen.getByPlaceholderText("Search");
expect(searchInput.value).toBe("Hello World");
});
You want HTMLInputElement (and/or HTMLSelectElement and HTMLTextAreaElement).
getByPlaceholderText is not very well named - as it's completely non-obvious what it returns. You should rename it to getInputElementByPlaceholderText and change its return-type to HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement.
As a quick-fix, use as:
test("SearchBar value is read", () => {
const handleSearchRequest = jest.fn();
render(<SearchBar searchInputValue="Hello World"/>);
const searchInput = screen.getByPlaceholderText("Search") as HTMLInputElement | null;
expect(searchInput?.value).toBe("Hello World");
});
At the moment I am doing this to pull back all the rows of a table:
const { getByTestId } = renderWithRouter(businessWithContext);
const firstTableRow = await waitForElement(() => getByTestId("row-1-name"));
const secondTableRow = await waitForElement(() => getByTestId("row-2-name"));
expect(firstTableRow.textContent).toBe("test1");
expect(secondTableRow.textContent).toBe("test2");
I would rather do something like this:
const rows = await waitForElement(() => getAllByText(/^row-*/gi));
But I get this error:
Unable to find an element with the text: /^row-*/gi. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
You are using getAllByText but you really want to query by data-testid. This will work:
getAllByTestId(/^row-*/)
This is how I currently get each DOM property from an ElementHandle :
let section: ElementHandle = await page.waitForSelector(".selector-list li");
let tagName = await section.$eval('a', (e) => e.tagName);
But here it's tagName. What if I'd like want to inspect further properties ?
I don't want to write $eval for each property.
Question:
How can I convert ElementHandle to a Dom object , so I'd be able
to browse all properties ?
I want to get A as a Dom object.
The better way would be to execute the code on the page via page.evaluate and return the results. That way you can return an array with values:
const result = await page.evaluate(() => {
const elements = document.querySelectorAll(".selector-list li");
// do something with elements, like mapping elements to an attribute:
return Array.from(elements).map(element => element.tagName);
});
result will then be an array with the attribute values of tagName of each element.
Use ElementHandle.evaluate():
const elementHandle = await page.waitForSelector('.selector-list li')
elementHandle.evaluate((domElement) => {
domElement.tagName
// etc ...
})
Typescript:
const elementHandle: ElementHandle = await page.waitForSelector('.selector-list li')
elementHandle.evaluate((domElement) => {
domElement.tagName
// etc ...
})