Einen Reducer für eine einfache CRUD-Anwendung in Redux strukturieren

Question

Also erstelle ich im Kern eine sehr einfache Anwendung im CRUD-Stil, die React + Redux verwendet. Es gibt eine Sammlung von Posts mit der Bezeichnung "Ich möchte sie anrufen" mit einer API, und ich möchte diese auflisten können. Wenn der Nutzer dann auf einen Eintrag klickt, geht er auf eine Detailseite zu diesem Post.

So habe ich eine Posts Reducer. Ursprünglich habe ich angefangen, den Ansatz aus dem reux-world-Beispiel zu verwenden. Dies verwaltet einen Cache von Objekten über einen Index Reducer, und wenn Sie einen "Get Post" tun, überprüft es den Cache und wenn es da ist, gibt es das zurück, sonst macht es den entsprechenden API-Aufruf. Wenn Komponenten mounten, versuchen sie, Dinge aus diesem Cache zu bekommen, und wenn sie nicht da sind, warten sie (geben Sie false zurück), bis sie es sind.

Während dies funktionierte OK, aus verschiedenen Gründen muss ich jetzt diese nicht-caching machen, d. H. Jedes Mal, wenn ich die/posts /: postId-Seite laden muss ich den Post über die API erhalten.

Ich realisiere in der Nicht-Redux-Welt, Sie würden nur eine fetch() in der KomponenteDidMount, und dann setState() darauf. Aber ich möchte, dass die Posts in einem Reducer gespeichert werden, da andere Teile der App Aktionen aufrufen können, die diese Posts modifizieren (sagen wir zum Beispiel einen Websocket oder nur eine komplexe redux-verbundene Komponente).

Ein Ansatz, den ich Leute haben gesehen, verwenden ist ein „aktives“ Element in ihrem Minderer, wie in diesem Beispiel: https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/reducers/reducer_posts.js

Während dies OK ist, erfordert es, dass jede Komponente, die die aktive Post lädt muss eine componentWillUnmount haben Aktion um den aktiven Post zurückzusetzen (siehe resetMe:). Wenn der aktive Beitrag nicht zurückgesetzt wurde, bleibt er hängen, wenn der nächste Beitrag angezeigt wird (er wird wahrscheinlich kurz blinken, während der API-Aufruf erfolgt, aber er ist immer noch nicht nett). Im Allgemeinen zwingt jede Seite, die einen Post sehen möchte, ein ResetMe() in einem ComponentWillUnmount durchzuführen, wie ein schlechter Geruch.

Hat also jemand irgendwelche Ideen oder ein gutes Beispiel dafür? Es scheint so ein einfacher Fall, ich bin ein bisschen überrascht, dass ich kein Material darüber finden kann.

Answer 1

Wie tun Sie es auf Ihren bereits bestehenden Reduzierungen abhängt, aber ich werde nur ein neues

reducers/post.js

import { GET_ALL_POSTS } from './../actions/posts'; 

export default (state = { 
    posts: [] 
}, action) => { 
    switch (action.type) { 
    case GET_ALL_POSTS: 
     return Object.assign({}, state, { posts: action.posts }); 
    default: 
     return state; 
    } 
}; 

Es ist sehr leicht zu verstehen, nur eine Aktion Feuer machen Erhalten Sie alle Ihre Posts und ersetzen Sie Ihre früheren Posts mit den neuen Posts im Reducer.

Verwenden Sie componentDidMount, um die Aktion GET_ALL_POSTS auszulösen, und verwenden Sie ein boolesches Flag im Status, um zu wissen, ob die Posts geladen wurden oder nicht, sodass Sie sie nicht jedes Mal neu laden, nur wenn die Komponente geladen wird.

components/posts.jsx

import React from 'react'; 

export default class Posts extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     firstLoad: false 
    }; 
    } 

    componendDidMount() { 
    if (!this.state.firstLoad) { 
     this.props.onGetAll(); 
     this.setState({ 
      firstLoad: true 
     }); 
    } 
    } 

    // See how easy it is to refresh the lists of posts 
    refresh() { 
    this.props.onGetAll(); 
    } 

    render() { 
    ... 

    // Render your posts here 
    { this.props.posts.map(...) } 
    ... 
    } 
} 

Wir stehen noch den Container fehlen die Beiträge und die Ereignisse der Komponente

containers/posts.js

import { connect } from 'react-redux'; 
import { getPosts } from './../actions/posts'; 
import Posts from './../components/posts.jsx'; 

export default connect(
    state => ({ posts: state.posts }), 
    dispatch => ({ onGetAll:() => dispatch(getPosts()) }) 
); 

Dies ist ein sehr einfach passieren Muster und ich habe es auf vielen Anwen verwendet

gen

Answer 2

Wenn Sie reagieren-Router verwenden, können Sie die Vorteile von onEnter Haken nehmen.