Как получать состояние в реалтайме?

Question

[historydev]

Доброе утро. Скажите пожалуйста, как я могу получить состояние заново после изменения, в документации есть пример с subscribe и логом, я попытался вернуть из него данные, но получаю саму функцию, then на него не влияет, ошибку не получаю только при условии что я юзаю getState().title. Я буквально вчера начал разбираться с ним, посмотрел урок, запутался окончательно, вернулся к документации +- понимая что и как работает.

import React from 'react';
import logo from './logo.svg';
import {Counter, store} from './features/counter/Counter';
import './App.css';


store.dispatch({ type: 'INCREMENT' });


function App() {

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Counter />
        <p onClick={() => store.dispatch({ type: 'DECREMENT' })}>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <span>
          <span>Learn {store.subscribe(() => store.getState().title)}</span>
          <a
            className="App-link"
            href="https://reactjs.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            React
          </a>
          <span>, </span>
          <a
            className="App-link"
            href="https://redux.js.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Redux
          </a>
          <span>, </span>
          <a
            className="App-link"
            href="https://redux-toolkit.js.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Redux Toolkit
          </a>
          ,<span> and </span>
          <a
            className="App-link"
            href="https://react-redux.js.org/"
            target="_blank"
            rel="noopener noreferrer"
          >
            React Redux
          </a>
        </span>
      </header>
    </div>
  );
}

export default App;

Спасибо

Answer 1

[Wondermarin]

Зачем вы используете store.dispatch? У вас же в react-redux есть и хуки, и connect. Да и в целом я не очень понял что вы пытаетесь сделать...

Вот вам пример с хуками и без: https://codesandbox.io/s/magical-booth-sb95e

Comments

[historydev]

спасибо огромное! Разобрался наконец-то, фуух

Answer 2

[abberati]

subscribe — это низкоуровневый api, не надо его использовать. В документации написано, как биндить редакс к реакту. Через react-redux

Comments

[historydev]

Да я читаю эту документацию, нашёл connect, всё сделал, один фиг ничего не передаётся, ну как, subscribe выводит информацию, а в компоненте получить её не могу -_-

{title: undefined, body: "Body"}
Counter.js:49 {title: undefined, body: "Body"}
Counter.js:49 {title: undefined, body: "Body 2"}
Counter.js:49 {title: undefined, body: "Body"}
webpackHotDevClient.js:138 ./src/App.js
Line 5:18: 'useDispatch' is defined but never used no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
App.js:15 Add Track
Counter.js:49 {title: 123, body: "Body"}
App.js:22 Remove Track
Counter.js:49 {title: 321, body: "Body 2"}

import React, {Component} from 'react';
import logo from './logo.svg';
import {Counter, store} from './features/counter/Counter';
import './App.css';
import {connect, useDispatch} from "react-redux";


store.dispatch({ type: 'INCREMENT' });


class App extends Component {

  addTrack () {

      console.log('Add Track');
      this.props.changeState(store.dispatch({type: 'INCREMENT', payload: 123}));

  };

  removeTrack() {

      console.log('Remove Track');
      this.props.changeState(store.dispatch({type: 'DECREMENT', payload: 321}));

  }

  render() {
    return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <Counter />
            <p onClick={this.addTrack.bind(this)}>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <span>
          <span onClick={this.removeTrack.bind(this)}>Learn {store.getState().title}</span>
          <a
              className="App-link"
              href="https://reactjs.org/"
              target="_blank"
              rel="noopener noreferrer"
          >
            React
          </a>
          <span>, </span>
          <a
              className="App-link"
              href="https://redux.js.org/"
              target="_blank"
              rel="noopener noreferrer"
          >
            Redux
          </a>
          <span>, </span>
          <a
              className="App-link"
              href="https://redux-toolkit.js.org/"
              target="_blank"
              rel="noopener noreferrer"
          >
            Redux Toolkit
          </a>
          ,<span> and </span>
          <a
              className="App-link"
              href="https://react-redux.js.org/"
              target="_blank"
              rel="noopener noreferrer"
          >
            React Redux
          </a>
        </span>
          </header>
        </div>
    );
  }
}

const changeState = data => data;

const mapDispatchToProps = { changeState };

export default connect(null, mapDispatchToProps)(App);

[Александр Черемхин]

у вас null передается в первом параметре

export default connect(null, mapDispatchToProps)(App);

передайте changeState, получите в props весь ваш state

[historydev]

Александр Черемхин, Я в него передаю замену store.dispatch({type: 'INCREMENT', payload: 123})

[historydev]

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

[historydev]

Александр Черемхин,

Invalid value of type object for mapStateToProps argument when connecting component App

Если ставлю в state

[abberati]

Владимир, а достаточно было прочитать getstarted на сайте редакса и сделать в точности как там написано