Skip to content

Commit 18bd1aa

Browse files
MrWolfZtimdorr
authored andcommitted
some minor hooks updates (#1294)
* fix wrong inline documentation for useSelectors hook * add test to get test coverage for useSelector to 100% * add test to verify that docs suggestion of putting a connected component above the hooks component allows dealing with stale props
1 parent 9183035 commit 18bd1aa

File tree

2 files changed

+77
-5
lines changed

2 files changed

+77
-5
lines changed

Diff for: src/hooks/useSelector.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ const refEquality = (a, b) => a === b
2020
* A hook to access the redux store's state. This hook takes a selector function
2121
* as an argument. The selector is called with the store state.
2222
*
23-
* This hook takes a dependencies array as an optional second argument,
24-
* which when passed ensures referential stability of the selector (this is primarily
25-
* useful if you provide a selector that memoizes values).
23+
* This hook takes an optional equality comparison function as the second parameter
24+
* that allows you to customize the way the selected state is compared to determine
25+
* whether the component needs to be re-rendered.
2626
*
2727
* @param {Function} selector the selector function
2828
* @param {Function} equalityFn the function that will be used to determine equality
@@ -33,7 +33,6 @@ const refEquality = (a, b) => a === b
3333
*
3434
* import React from 'react'
3535
* import { useSelector } from 'react-redux'
36-
* import { RootState } from './store'
3736
*
3837
* export const CounterComponent = () => {
3938
* const counter = useSelector(state => state.counter)

Diff for: test/hooks/useSelector.spec.js

+74-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import * as rtl from 'react-testing-library'
77
import {
88
Provider as ProviderMock,
99
useSelector,
10-
shallowEqual
10+
shallowEqual,
11+
connect
1112
} from '../../src/index.js'
1213
import { useReduxContext } from '../../src/hooks/useReduxContext'
1314

@@ -302,6 +303,78 @@ describe('React', () => {
302303

303304
spy.mockRestore()
304305
})
306+
307+
it('re-throws errors from the selector that only occur during rendering', () => {
308+
const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
309+
310+
const Parent = () => {
311+
const count = useSelector(s => s.count)
312+
return <Child parentCount={count} />
313+
}
314+
315+
const Child = ({ parentCount }) => {
316+
const result = useSelector(({ count }) => {
317+
if (parentCount > 0) {
318+
throw new Error()
319+
}
320+
321+
return count + parentCount
322+
})
323+
324+
return <div>{result}</div>
325+
}
326+
327+
rtl.render(
328+
<ProviderMock store={store}>
329+
<Parent />
330+
</ProviderMock>
331+
)
332+
333+
expect(() => store.dispatch({ type: '' })).toThrowError()
334+
335+
spy.mockRestore()
336+
})
337+
338+
it('allows dealing with stale props by putting a specific connected component above the hooks component', () => {
339+
const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
340+
341+
const Parent = () => {
342+
const count = useSelector(s => s.count)
343+
return <ConnectedWrapper parentCount={count} />
344+
}
345+
346+
const ConnectedWrapper = connect(({ count }) => ({ count }))(
347+
({ parentCount }) => {
348+
return <Child parentCount={parentCount} />
349+
}
350+
)
351+
352+
let sawInconsistentState = false
353+
354+
const Child = ({ parentCount }) => {
355+
const result = useSelector(({ count }) => {
356+
if (count !== parentCount) {
357+
sawInconsistentState = true
358+
}
359+
360+
return count + parentCount
361+
})
362+
363+
return <div>{result}</div>
364+
}
365+
366+
rtl.render(
367+
<ProviderMock store={store}>
368+
<Parent />
369+
</ProviderMock>
370+
)
371+
372+
store.dispatch({ type: '' })
373+
374+
expect(sawInconsistentState).toBe(false)
375+
376+
spy.mockRestore()
377+
})
305378
})
306379

307380
describe('error handling for invalid arguments', () => {

0 commit comments

Comments
 (0)