Redux не отображает содержимое магазина

Question

Я пытаюсь отобразить значение магазина в представлении, но оно не отображается.Я не знаю, почему это не рендеринг.Может кто-нибудь объяснить мне, почему?(Я смотрел курс Дана Абрамова на Яичную Голову, и я до сих пор не понимаю)

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      console.log('Increment', state);

      return ++state;

    case 'DECREMENT':
      console.log('Decrement', state);

      return --state;

    default:
      return state;
  }
} 

const store = createStore(
  reducer
)

class App extends Component {
  render() {
    return (
      <div>
        <p>{JSON.stringify(this.props.store)}</p>

        <button onClick={() => store.dispatch({type: 'INCREMENT'})}>+</button>

        <button onClick={() => store.dispatch({type: 'DECREMENT'})}>-</button>
      </div>
    );
  }
}

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

Answer 1

отметьте это

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';

import reducers from './reducers';
const store = createStore(
  reducers,
  applyMiddleware(reduxThunk)// not needed
);
ReactDOM.render(
  <Provider store={store}>  
      <App/> 
  </Provider>,
  document.querySelector('#root')
);

Компонент приложения

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Signout extends Component {
  componentDidMount() {
    console.log(this.props.data);
  }

  render() {
    return <div>Sorry to see you go</div>;
  }
}
function mapStateToProps(state) {
  return { data: state.data};
}

export default connect(mapStateToProps, actions)(App);

Answer 2

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { createStore } from 'redux';

const reducer = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      console.log('Increment', state);

      return ++state;

    case 'DECREMENT':
      console.log('Decrement', state);

      return --state;

    default:
      return state;
  }
} 

const store = createStore(
  reducer
);

class App extends Component {
  update() {
      this.forceUpdate();
  }
  componentDidMount(){
    this.unsubscribe = store.subscribe(this.update.bind(this));
  }
  componentWillUnmount(){
      this.unsubscribe();
  }
  render() {
    return (
      <div>
        <p>{JSON.stringify(store.getState())}</p>

        <button onClick={() => store.dispatch({type: 'INCREMENT'})}>+</button>

        <button onClick={() => store.dispatch({type: 'DECREMENT'})}>-</button>
      </div>
    );
  }
}


export default App;

Answer 3

Используйте Redux Connect для доступа к состоянию в компоненте

ex:

export default connect(mapStateToProps, actions)(yourComponent);

Answer 4

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

return state + 1; // instead of ++state
return state - 1; // instead of --state

Чтобы отобразить состояние:

class App extends Component {
  render() {
    return (
      <div>
        <p>{store.getState()}</p>

Чтобы получить изменения в магазине, вам также необходимо подписаться на изменения:

const unsubscribe = store.subscribe( // generally, this is called on event handler
  ReactDOM.render(
    <App store={store} />,
    document.getElementById('root')
  )
)
unsubscribe()

Вы также можете подписаться на изменения в componentDidMount и отказаться от подписки в хуке жизненного цикла componentWillUnmount.Вы можете посмотреть ответ, предоставленный henok tesfaye: подписка и отписка в жизненном цикле .

Вы можете прочитать его в документах , чтобы узнать больше об этом.

---

Но в общем, нам не нужен подписчик.Мы можем получить изменения путем сопоставления состояний, используя connect.Этот блог объясняет это очень хорошо.Итак, я бы посоветовал вам посмотреть Использование с реагированием