Трудно что-то сказать, так как вы предоставили в примерах либо недостоверный, либо нерабочий код:
componentDidMount() {
setTimeout(() => {
updateStore(1); // <--- WTF?
});
}
Вот полностью рабочий пример кода, повторяющий логику вашего:
import React, { useRef, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';
const UPDATE = 'UPDATE';
const update = (payload) => ({
type: UPDATE,
payload,
});
const reducer = (state = 0, action) => {
if (action.type === UPDATE) {
return action.payload;
}
return state;
}
const store = createStore(reducer);
const mapStateToProps = state => ({ state });
const mapDispatchToProps = { update };
const Header = ({ state }) => (
<div>Header. State: {state}</div>
);
const ConnectedHeader = connect(mapStateToProps)(Header);
const Body = ({ state, update }) => {
const inputEl = useRef(null);
const handler = useCallback(() => {
update(inputEl.current.value);
}, [inputEl, update]);
return (
<div>
<div>Body. State: {state}</div>
<input type="number" ref={inputEl} />
<button onClick={handler}>Update state</button>
</div>
);
}
const ConnectedBody = connect(
mapStateToProps,
mapDispatchToProps,
)(Body);
const App = () => (
<Provider store={store}>
<ConnectedHeader />
<ConnectedBody />
</Provider>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Демо