Come accedere allo stato del negozio in React Redux?

Question

Sto solo facendo una semplice app per imparare async con redux. Ho ottenuto tutto funziona, ora voglio solo visualizzare lo stato attuale sulla pagina web. Ora, come posso effettivamente accedere allo stato del negozio nel metodo di rendering?

Ecco il mio codice (è tutto in una sola pagina, perché sto solo imparando):

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

Così, nel metodo di rendering dello Stato voglio elencare tutte le item.title dal negozio.

Grazie

Answer 1

Si dovrebbe creare componente separato, che sarà l'ascolto di modifiche dello stato e l'aggiornamento su ogni cambiamento di stato:

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

è necessario utilizzare Store.getState() per ottenere lo stato corrente del tuo negozio.

Per ulteriori informazioni su getState() guardare this breve video.

Answer 3

Si vuole fare di più che getState. Vuoi reagire ai cambiamenti nel negozio.

Se non si utilizza reagisce-redux, si può fare questo:

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 

Ma meglio è quello di utilizzare reagire-redux. In questo caso usi il Provider come hai detto, ma poi usa connect per connettere il tuo componente allo store.