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)
...

这使我出错

TypeError：无法读取未定义的属性“ subscribe”

打扰一下？我在做什么错了？

Answer 1

//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

Answer 2

这是一个循环依赖问题。

index.js导入App.js，最终导入Box.js。但是，Box.js正在尝试import {store} from "../../index.js”，这在几种方面都是错误的。

您的组件文件不应该尝试直接导入存储，并且绝对不应该尝试从index.js导入值。您也不应尝试直接在组件文件中订阅商店。

相反，请在组件中使用React-Redux connect()函数来创建包装程序，以管理您的商店预订过程。然后，使用连接的组件，它们将自动使用您传递给<Provider>的商店。

ReactJS + Redux订阅方法混乱

2 个答案: