ReactJS + Redux подписка метод беспорядок

Question

Использование create-реагировать на приложение

//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();

приведенный выше код полезен для создания магазина с несколькими редукторами в сочетании. а также предоставление всего приложения путем передачи его в компонент поставщика, обертывающий приложение. Это делает избыточные действия и сохраняет содержимое доступным для компонента. Там вы можете подписаться на магазин и получать уведомления об изменениях в магазине или о действиях рассылки.

Вы используете обратный вызов для неправильной подписки. Вы можете использовать это так:

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

Answer 2

Это круговая проблема зависимости.

index.js импорт App.js, который в конечном итоге импортирует Box.js, Но, Box.js пытается import {store} from "../../index.js", что неправильно в нескольких отношениях.

Ваши файлы компонентов не должны пытаться импортировать хранилище напрямую, и определенно не должны пытаться импортировать значения из index.js, Вы также не должны пытаться подписаться на магазин непосредственно в ваших компонентных файлах.

Вместо этого используйте React-Redux connect() Функция в ваших компонентах для создания упаковщиков, которые управляют процессом подписки на магазин для вас. Затем используйте подключенные компоненты, и они автоматически будут использовать магазин, который вы передали <Provider>,