How is "ReactReduxContext.Consumer" working? - reactjs

Question

I wrote a demo to try to understand how "ReactReduxContext.Consumer" works, the main code like this:
Hello.tsx
export default function Hello() {
return <ReactReduxContext.Consumer>
{({store}) => {
return <div>
<ul>
<input value={store.getState().name} onChange={(e) => store.dispatch(changeNameAction(e.target.value))}/>
<div>{JSON.stringify(store.getState())}</div>
</ul>
</div>
}}
</ReactReduxContext.Consumer>
}
Entry.tsx
ReactDOM.render(
<Provider store={store}>
<Hello/>
</Provider>,
document.body
);
State.ts
export type State = {
name: string
};
reducer.ts
const initStore: State = {
name: 'aaa'
}
export default function reducers(state = initStore, action: ChangeNameAction): State {
switch (action.type) {
case 'CHANGE_NAME':
return {
...state,
name: action.name
};
default:
return state;
}
}
action.ts
export type ChangeNameAction = {
type: 'CHANGE_NAME',
name: string,
}
export function changeNameAction(name: string): ChangeNameAction {
return {
type: 'CHANGE_NAME',
name: name
}
}
It renders correctly:
But if I type anything in the text field, the value doesn't change.
I'm not sure why it doesn't work.
Here is a tiny but complete demo of this question: https://github.com/freewind-demos/typescript-react-redux-context-consumer-demo

Answer 1

ReactReduxContext is a React Context that contains the current Redux store.
The store reference never changes in normal operation, which means that anyone listening directly to the context in the manner you are doing will never see updates.
React Redux's connect() and useSelector both subscribe to the store and 'notify' React of the updates (usually by setting some state, which causes a re-render of the subscribed component).
You could implement your own primitive version of useSelector by doing this:
function useSelector(f) {
const store = React.useContext(ReactReduxContent);
const [state, setNextState] = React.useState(() => {
return f(store.getState());
});
React.useEffect(() => {
return store.listen(state => {
setNextState(f(store.getState()));
});
}, [f, store]);
return state;
}
React Context only propagates changes when the value passed to the provider changes, which is why you must subscribe to the store itself - as mentioned earlier, the store will never change in normal operation.