2016-07-12 4 views
28

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?Come accedere allo stato del negozio in React Redux?

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

+1

Sei quasi arrivato. È necessario creare un componente collegato al negozio usando la libreria 'react-redux'. Consiglio vivamente di perfezionare la tua conoscenza del redux con il corso gratuito dell'autore: https://egghead.io/courses/getting-started-with-redux – ctrlplusb

+1

Fai 'store.getState()' per leggere effettivamente lo stato da il tuo negozio. http://redux.js.org/docs/api/Store.html#getState –

+1

Grazie per il tutorial. Non capisco perfettamente il redux e questo tutorial mi aiuterà molto. – Parkicism

risposta

24

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

Grazie mille per il tuo aiuto! – Parkicism

+23

@ 1ven come si ottiene la variabile 'store' qui definita? –

+2

@BangDao possiamo supporre, che lo stiamo importando da file esterno. Variabile 'store' - è un'istanza di redux store. – 1ven

5

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

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

+0

Così cambio semplicemente 'this.props.items' a' store.getState(). Items'? Quando l'ho fatto, non emette il 'item.title'. – Parkicism

+0

@Parkicism hai qualche errore? – semanser

+0

nessun errore, non sta trasmettendo nulla – Parkicism

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.

+0

L'op ha chiesto specificamente per React-Redux. Perché fornire una soluzione per qualcosa di diverso dalla richiesta? –

Problemi correlati