Por qué redux requiere operaciones asincrónicas
Esta vez, volví a seleccionar el mejor escenario de aplicación para demostrar el procesamiento asincrónico: buscar en la lista de noticias. Dado que existen interfaces listas para usar, no necesitamos crear nuestros propios servicios. Encontré al azar una interfaz de servicio de noticias en línea que admite jsonp, así que usémosla.
Al principio, todavía escribimos el código básico en el orden de los componentes action-gt; Mi idea es que haya un botón de búsqueda al lado de un cuadro de entrada. Después de escribir y hacer clic en el botón, se mostrará una lista de noticias relacionadas con las palabras clave ingresadas.
La primera es la acción. La acción que se puede pensar ahora es poner la lista de noticias en el almacén, hablaremos de ello más adelante. Veamos src/actions/news.js:
importar {cac} desde 'utils'
exportar const PUSH_NEWS_LIST = 'PUSH_NEWS_LIST'
exportar const pushList = cac (PUSH_NEWS_LIST, 'list')
Luego está el reductor, que no es nada especial, siempre que encuentre la acción definida anteriormente, pondrá los datos en el estado correspondiente. Comenzaremos con un estado llamado noticias que contiene una lista de subestados y, a medida que la funcionalidad se expanda, agregaremos más subestados al estado de noticias. El siguiente es el código de src/reducers/news.js:
importar {combineReducers} desde 'redux';
importar {cr} desde '...
importar {PUSH_NEWS_LIST} de 'acciones/noticias'
exportar combineReducers predeterminados({
lista: cr([], {
[PUSH_NEWS_ LIST ]( state, {list}){return list}
})
})
Ahora es el momento de comenzar a escribir componentes. Esta vez crearemos una lista, lo que significa que tendremos componentes duplicados y creo que sería mejor extraer los componentes duplicados en un solo componente para facilitar su mantenimiento y reutilización. Entonces, extraigamos una noticia en un componente que debe contener el título, la hora de publicación, la imagen y la descripción general del contenido. Este componente es absolutamente puro y no necesita tratar con el mundo exterior, así que colóquelo en el directorio de componentes. src/components/NewsOverview.js:
importar React desde 'react';
la clase NewsOverview extiende React.Component {
render(){
let date = nueva Fecha(this.props.Time)