ReactJS + Redux 订阅方法混乱

Question

使用create-react-app

//index.js 
...
export const store = createStore(getChange, applyMiddleware(thunk)) 
//getChange is my reducers name

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
registerServiceWorker();


// Box.js which gets rendered in App.js 

import {store} from '../../../index'
...
const renderagain = () => store.getState()

store.subscribe(renderagain)
...

这给我带来了一个错误

类型错误：无法读取未定义的属性“订阅”

对不起？我做错了什么？

Answer 1

这是一个循环依赖问题。

index.js

导入

App.js

，最终导入

Box.js

。但是，

Box.js

正在尝试

import {store} from "../../index.js

”，这在很多方面都是错误的。

您的组件文件不应该尝试直接导入存储，并且绝对不应该尝试从

index.js

导入值。您也不应该尝试直接在组件文件中订阅商店。

相反，请在组件中使用 React-Redux

connect()

函数来创建包装器，为您管理订阅商店的过程。然后，使用连接的组件，它们将自动使用您传递给

<Provider>

的存储。

Answer 2

//index.js 
...
export const store = createStore(getChange, applyMiddleware(thunk)) 
//getChange is my reducers name

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
registerServiceWorker();

上面的代码很适合用来创建一个结合了一些减速器的商店。并通过将其传递到包装应用程序的提供者组件中来将其提供给整个应用程序。这使得 redux 操作和存储内容可供组件访问。您可以在那里订阅商店，以获取有关商店更改或操作调度的通知。

您使用回调的方式订阅是错误的。你可以这样使用它：

function select(state) {
  return state.some.deep.property
}
​
let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())
​
  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}
​
const unsubscribe = store.subscribe(handleChange)
unsubscribe()

有关更多文档和查询，您可以查看此内容。 https://redux.js.org/api/store#subscribe-listener