Pregunta ¿Cómo accedo al estado de la tienda en React Redux?


Solo estoy haciendo una aplicación simple para aprender asincronizar con redux. He conseguido que todo funcione, ahora solo quiero mostrar el estado real en la página web. Ahora, ¿cómo puedo acceder al estado de la tienda en el método de renderizado?

Aquí está mi código (todo está en una página porque recién estoy aprendiendo):

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

Entonces, en el método de representación del estado, quiero enumerar todos los item.title de la tienda.

Gracias


35
2017-07-12 15:17


origen


Respuestas:


Debería crear un componente por separado, que escuchará los cambios de estado y la actualización en cada cambio de estado:

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

30
2017-07-12 15:38



Importar connect de react-redux y usarlo para conectar el componente con el estado connect(mapStates,mapDispatch)(component)

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


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

Finalmente, debe asignar los estados a los accesorios para acceder a ellos con this.props 

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

Solo se podrá acceder a los estados que mapea a través de props

Mira esta respuesta: https://stackoverflow.com/a/36214059/4040563

Para lectura adicional: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132


12
2018-05-08 03:35



Tienes que usar Store.getState() para obtener el estado actual de tu tienda.

Para más información sobre getState() reloj esta video corto.


6
2017-07-12 15:29



Quieres hacer más que solo getState. Desea reaccionar a los cambios en la tienda.

Si no está utilizando react-redux, puede hacer esto:

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

Pero es mejor usar react-redux. En este caso, usa el Proveedor como usted mencionó, pero luego use conectar para conectar tu componente a la tienda.


4
2017-07-12 15:39