Issue

这里所讨论的"listener"是store.subscribe期望传递的listener回调函数.

见subscribe(listener)

ReactDOM.createRoot().render不返回函数.

const root = ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <App dispatch={store.dispatch} state={store.getState()} />
  </React.StrictMode>
);

store.subscribe(root); // root is not a function

Solution

您也许可以创建一个函数来呈现应用程序，该应用程序也可以用作侦听器回调.

示例:

const root = ReactDOM.createRoot(document.getElementById('root'));

const renderApp = () => { 
  root.render(
    <React.StrictMode>
      <App dispatch={store.dispatch} state={store.getState()} />
    </React.StrictMode>
  );
};

renderApp(); // <-- call once to initially render app

store.subscribe(renderApp); // <-- pass as listener to rerender with state changes

100 This 101 how we use Redux in React though!

您应该导入并包装App组件到react-redux Provider组件中，以向React应用程序提供Redux store上下文.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import store from './store.js';

const root = ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

App组件和子ReactTree中的所有组件都应该导入并使用react-redux中的useDispatch和useSelector钩子来将动作分派到存储中，并订阅所选的状态更新.

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import PostContainer from './features/post/PostContainer'

function App() {
  const dispatch = useDispatch();
  const postContainer = useSelector(state => state.postContainer);

  useEffect(() => {
    dispatch({
      type: 'postContainer/addPost',
      payload: 'test'
    });
  }, [dispatch]);

  useEffect(() => {
    console.log({ postContainer });
  }, [postContainer]);
 
  ...
}

export default App;