Jak uzyskać dostęp do stanu sklepu w React Redux?

Po prostu tworzę prostą aplikację do nauki asynchronizacji z Redux. Wszystko działa, teraz chcę po prostu wyświetlić aktualny stan na stronie internetowej. W jaki sposób mogę uzyskać dostęp do stanu sklepu w metodzie renderowania?

Oto mój kod (wszystko jest na jednej stronie, bo dopiero się uczę):

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')
);

Tak więc w metodzie renderowania stanu chcę wyświetlić wszystkie item.titleze sklepu.

Dzięki

Powinieneś stworzyć osobny komponent, który będzie nasłuchiwał zmian stanu i aktualizował przy każdej zmianie stanu:

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'));

Importuj connectz react-reduxi użyj go do połączenia komponentu ze stanemconnect(mapStates,mapDispatch)(component)

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


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

Na koniec musisz zmapować stany do właściwości, aby uzyskać do nich dostęp this.props

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

Tylko stany, które mapujesz, będą dostępne za pośrednictwem props

Sprawdź tę odpowiedź: https://stackoverflow.com/a/36214059/4040563

Więcej informacji: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132

Musisz użyć, Store.getState()aby sprawdzić aktualny stan swojego Sklepu.

Aby uzyskać więcej informacji, getState()obejrzyj ten krótki film.

Chcesz zrobić więcej niż tylko getState. Chcesz reagować na zmiany w sklepie.

Jeśli nie używasz React-Redux, możesz to zrobić:

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

Ale lepiej jest użyć React-Redux. W takim przypadku korzystasz z dostawcy, o którym wspomniałeś, ale następnie użyj connect, aby połączyć swój komponent ze sklepem.

Jeśli chcesz przeprowadzić debugowanie o dużej mocy, możesz zasubskrybować każdą zmianę stanu i wstrzymać aplikację, aby zobaczyć, co się dzieje szczegółowo w następujący sposób.

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

Umieść to w pliku, w którym to robisz createStore.

Aby skopiować stateobiekt z konsoli do schowka, wykonaj następujące kroki:

1. Kliknij prawym przyciskiem myszy obiekt w konsoli Chrome i wybierz Zapisz jako zmienną globalną z menu kontekstowego. Jako nazwę zmiennej zwróci coś w rodzaju temp1.

2. Chrome ma również copy()metodę, więc copy(temp1)w konsoli należy skopiować ten obiekt do schowka.

https://stackoverflow.com/a/25140576

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

Możesz wyświetlić obiekt w przeglądarce json, takiej jak ta: http://jsonviewer.stack.hu/

Możesz porównać dwa obiekty json tutaj: http://www.jsondiff.com/