Возникли проблемы при передаче состояния Redux дочернему компоненту - PullRequest
Новая
       1

Возникли проблемы при передаче состояния Redux дочернему компоненту

0 голосов
/ 15 июня 2019

Я новичок в Redux, и я работаю с кодом для самого первого примера проекта в документации Redux . Этот пример не использует контейнеры и не имеет отдельных файлов для действий, поэтому я решил, что начну там и попробую немного абстрагироваться.

В проекте нет компонента App, а файл index.js выглядит следующим образом: 

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

Сначала я изменил это так, чтобы вместо него монтировался компонент App: 

...

import { Provider } from 'react-redux':

...

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

Я переместил компонент Counter в App.js и попытался использовать mapStateToProps для приведения в исходное состояние (установите state = 0 в редукторе): 

import React from 'react';
import Counter from '../components/Counter.js';
import { connect } from 'react-redux';

class App extends React.Component {

    render() {
        return(
            <div>
                <Counter value={value} />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return { value: state.value };
}

export default connect(mapStateToProps)(App);

Я пытаюсь передать Counter value реквизит, установленный в mapStateToProps.

С кодом выше я получаю ошибку в <Counter value={value} />:

'значение' не определено no-undef

Как бы безумно это не звучало, я подумал, что, возможно, мне пришлось инициализировать value внутри constructor функции для App, чтобы заставить эту работу: 

constructor() {
    super(props);

    this.state = {
        value: 0
    }
}

Это не сработало, и все равно не имеет смысла, учитывая, что состояние инициализируется в редукторе.

Ответы [ 2 ]

1 голос
/ 15 июня 2019

Значение, которое возвращается из mapStateToProps, становится частью реквизита.Таким образом, «ценность» будет частью реквизита.Вы можете получить доступ к значению: 

<Counter value={this.props.value} />
1 голос
/ 15 июня 2019

Очень просто, вы все делаете правильно, но вам просто нужно немного изменить метод рендеринга, чтобы получить обновленное значение, ваша проблема будет решена.

Просто внесите эти изменения в свой компонент приложения, куда бы вы ни пошли. 

import React, {Component} from 'react';
import Counter from '../components/Counter.js';
import { connect } from 'react-redux';

class App extends Component {

  render() {
    const {
      props: {
        value
      }
    } = this;
    return(
        <div>
            <Counter value={value} />
        </div>
    );
  }
}

Вам не нужно initialize значение в методе constructor.

...