Использование React-Redux: как получить доступ к переменным в хранилище, во вложенных компонентах

Question

Я использую React-Redux, но я не могу понять, как получить доступ к переменной в хранилище Redux внутри моих вложенных компонентов.

Как я могу поделиться переменной между компонентами, используя React -Redux?

Например:

У меня есть файл index. js и 30 вложенных компонентов. Через некоторое время управление этими компонентами становится затруднительным.

У меня есть компонент 'C1. js'. Скажем так, я написал в нем этот код.

function Reducer(state = 'example' , action) {
    return state;
}
const store = createStore(Reducer)

index. js file:

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

Как передать переменную store в переменную C1. js 'компонент для индекса. js файл?

Спасибо ...

Answer 1

Получается эта ошибка

Не удалось найти «store» в контексте «Connect (C1)». Либо оберните компонент root в a, либо передайте пользовательский поставщик контекста React соответствующему получателю контекста React в Connect (C1) в параметрах соединения.

Answer 2

Вы плохо настроили редукс и отреагировали. Вам нужно go сверх do c redux для правильной настройки. Должен начать работать после этого.

Answer 3

Для подключения различных компонентов к поставщику необходимо использовать что-то, называемое «Connect».

В файле, содержащем ваш компонент C1. js:

  import {connect} from 'react-redux'


  const MyComponent = () => {
      let someData = props.someData
      return(
        //all of your JSX for your component here
      )
  }

  const mapState = state => {
    return {
       someData: state.someData
    }
  }

export default connect(mapState)(MyComponent)

In код выше, обратите внимание на mapStateFunction. Connect связывает это с провайдером и его состоянием. Таким образом, именно здесь вы можете связать любые свойства, находящиеся в состоянии вашего провайдера (React-Redux) с этими конкретными данными.

Теперь в вашем компоненте теперь будет prop.someData

-

В файле индекса ваш провайдер находится не в том месте, вам нужно изменить свой код следующим образом:

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

Видите, какая разница? Элемент React (и все его дочерние элементы, которые вы просите, чтобы React визуализировал в DOM). Это первый параметр функции ReactDOM.render.

Второй параметр функции ReactDom.render - это элемент в DOM, куда вы хотите поместить все ваши элементы React.