Як отримати доступ до стану магазину в React Redux?

Я просто роблю просту програму, щоб навчитися асинхронізації за допомогою redux. У мене все працює, тепер я просто хочу відобразити фактичний стан на веб-сторінці. Тепер, як я дійсно можу отримати доступ до стану магазину в методі візуалізації?

Ось мій код (все на одній сторінці, бо я тільки вчуся):

const initialState = {
        fetching: false,
        fetched: false,
        items: [],
        error: null
    }

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case "REQUEST_PENDING": {
            return {...state, fetching: true};
        }
        case "REQUEST_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                items: action.payload
            }
        }
        case "REQUEST_REJECTED": {
            return {...state, fetching: false, error: action.payload}   
        }
        default: 
            return state;
    }
};

const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

store.dispatch({
    type: "REQUEST",
    payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});

render(
    <Provider store={store}>
        <div>
            { this.props.items.map((item) => <p> {item.title} </p> )}
        </div>
    </Provider>,
    document.getElementById('app')
);

Отже, у методі візуалізації штату я хочу перерахувати все item.titleз магазину.

Дякую

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

import store from '../reducers/store';

class Items extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };

    store.subscribe(() => {
      // When state will be updated(in our case, when items will be fetched), 
      // we will update local component state and force component to rerender 
      // with new data.

      this.setState({
        items: store.getState().items;
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map((item) => <p> {item.title} </p> )}
      </div>
    );
  }
};

render(<Items />, document.getElementById('app'));

Імпорт connectз react-reduxі використовувати його для підключення компонента зі станомconnect(mapStates,mapDispatch)(component)

import React from "react";
import { connect } from "react-redux";


const MyComponent = (props) => {
    return (
      <div>
        <h1>{props.title}</h1>
      </div>
    );
  }
}

Нарешті, вам потрібно зіставити штати з реквізитом, щоб отримати до них доступ this.props

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
export default connect(mapStateToProps)(MyComponent);

Доступними будуть лише ті штати, через які ви складаєте карту props

Перевірте цю відповідь: https://stackoverflow.com/a/36214059/4040563

Для подальшого читання: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Вам потрібно використовувати, Store.getState()щоб отримати поточний стан вашого магазину.

Для отримання додаткової інформації про getState()перегляд цього короткого відео.

Ви хочете зробити більше, ніж просто getState. Ви хочете реагувати на зміни в магазині.

Якщо ви не використовуєте response-redux, ви можете зробити це:

function rerender() {
    const state = store.getState();
    render(
        <div>
            { state.items.map((item) => <p> {item.title} </p> )}
        </div>,
        document.getElementById('app')
    );
}

// subscribe to store
store.subscribe(rerender);

// do initial render
rerender();

// dispatch more actions and view will update

Але краще використовувати реакцію-відновлення. У цьому випадку ви використовуєте постачальника, як ви вже згадували, але потім використовуєте підключення для підключення компонента до магазину.

Якщо ви хочете виконати якусь потужну налагодження, ви можете підписатися на кожну зміну стану і призупинити програму, щоб детально побачити, що відбувається, наступним чином.

store.subscribe( () => {
  console.log('state\n', store.getState());
  debugger;
});

Помістіть це у файл, де ви робите createStore.

Щоб скопіювати stateоб’єкт із консолі в буфер обміну, виконайте такі дії:

1. Клацніть правою кнопкою миші на об’єкті на консолі Chrome та виберіть у контекстному меню пункт Зберегти як глобальну змінну. Він поверне щось на зразок temp1 як ім'я змінної.

2. Chrome також має copy()метод, тому copy(temp1)в консолі слід скопіювати цей об’єкт у ваш буфер обміну.

https://stackoverflow.com/a/25140576

https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

Ви можете переглянути об'єкт у засобі перегляду json, як цей: http://jsonviewer.stack.hu/

Ви можете порівняти два об'єкти json тут: http://www.jsondiff.com/