Wie kann ich auf den Speicherstatus in React Redux zugreifen?

Question

Ich mache gerade eine einfache App, um Async mit Redux zu lernen. Ich habe alles in Ordnung gebracht, jetzt möchte ich nur den aktuellen Zustand auf der Webseite anzeigen. Wie kann ich nun in der Rendermethode auf den Status des Geschäfts zugreifen?

Hier ist mein Code (alles auf einer Seite ist, weil ich lerne gerade):

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

also in der Render-Methode des Staates Ich möchte alle aus dem Laden, um die item.title zur Liste aus.

Dank

Answer 1

Sie sollten separate Komponente erstellen, die Zustandsänderungen werden zu hören und auf jeder Statusänderung Aktualisierung:

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

Answer 2

Sie müssen Store.getState() verwenden aktuellen Status Ihres Shop zu bekommen.

Für weitere Informationen über getState() Uhr this kurze Video.

Answer 3

Sie wollen mehr tun, als nur getState. Sie möchten auf Änderungen im Geschäft reagieren.

Wenn Sie nicht reagieren-redux verwenden, können Sie dies tun:

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 

Aber besser ist reagieren-redux zu verwenden. In diesem Fall verwenden Sie den Provider, wie Sie bereits erwähnt haben, aber verwenden Sie dann connect, um Ihre Komponente mit dem Geschäft zu verbinden.