React Redux Verantwortlichkeiten

Question

Ich fing an zu lernen reakt-redux-unveränderlich paar Tage und ich bin immer noch ziemlich verwirrt über die Strukturierung meiner Anwendung. Ich habe PHP (Symfony/Laravel MVC Hintergrund), so ist es nicht einfach, mich mit einigen Javascript-Konzepten zu beschäftigen.

1) Ich habe Linien WrapperComponent:

export default function (props) { 
    const style = {position: "relative"}; 
    const lines = props.lines; 

    return (
     <div className='wrapper' style={style}> 
      {lines.map(line => (
       <Line key={line.get("id")} {...line.toObject()} /> 
      ))} 
      <Board /> 
     </div> 
    ); 
} 

2) Das zu WrapperContainer verbunden ist

import Wrapper from '../components/WrapperComponent'; 

export default connect(
    function mapStateToProps(state) { 
     return { 
      lines: state.lines.map(line => { 
       return line.set("board", { 
        width: state.board.get("width"), 
        height: state.board.get("height") 
       }); 
      }) 
     }; 
    }, 
    function mapDispatchToProps(dispatch) { 
     return {}; 
    } 
)(Wrapper); 

3) Dann gibt es AddLine Aktion

export function addLine(type) { 
    return { 
     type: types.ADD_LINE, 
     payload: { 
      id: 3, top: 0, left: 0, diffX: 0, diffY: 0, type: type, board: { 
       width: 0, 
       height: 0 
      }, active: false 
     } 
    }; 
} 

4), dass die Gespräche zu LinesReducer

export default function LinesReducer(state = initialState, action) { 
    switch (action.type) { 
     case types.ADD_LINE: 
      return state.push(
       Map(action.payload) 
      ); 
     default: 
      return state; 
    } 
} 

5) Damit WrapperContainer auf Veränderungen in Staat und hören können wieder machen die Linien

export default connect(
    function mapStateToProps(state) { 
     return { 
      lines: state.lines.map(line => { 
       return line.set("board", { 
        width: state.board.get("width"), 
        height: state.board.get("height") 
       }); 
      }) 
     }; 
    }, 
    function mapDispatchToProps(dispatch) { 
     return {}; 
    } 
)(Wrapper); 

Nun meine Frage:

Wo finde ich Logik über die AddLine die Tat umgesetzt?

Wenn ich eine Zeile erstellen möchte ich seine ID setzen UND ich möchte seine Breite gleich wie Breite/Höhe einer anderen Komponente festlegen.

Ich denke, dass Aktionen nur Informationen von einem Ort zu einem anderen übertragen sollten.

Dann denke ich ... vielleicht sollte die Logik bei LinesReducer leben. Aber Lines Reducer hat keinen Zugriff auf den globalen Status der Anwendung, daher weiß ich nicht, welche Breite/Höhe die neue Zeile haben sollte.

Dann gibt es WrapperContainer. Der Container enthält Informationen über den Status aller Anwendungen, sodass es sinnvoll erscheint, jede Zeile zu durchlaufen und IDs festzulegen, wenn sie nicht festgelegt sind, und ihre Breite/Höhe und andere Informationen zu aktualisieren.

Aber das scheint mir nicht richtig. Ich dachte über einen Ort nach, der Informationen über den globalen Zustand der Anwendung sammeln würde, dann würde er neue Zeile basierend auf diesen Informationen hinzufügen und nichts anderes würde diese Zeile jemals wieder berühren. Außer für eine andere Aktion.

Ist das der richtige Ansatz? Ich möchte tatsächlich die Linienbreite/-höhe ändern, wenn sich die Höhe/Breite einer anderen Komponente ändert, so dass Container für mich am sinnvollsten ist.

EDIT:

Vielleicht:

1) ID in Aktion gesetzt, wenn die Linie tatsächlich erstellt wird (ich weiß nur nicht, wie viele Zeilen gibt es bereits so weiß ich nicht wirklich Welche ID sollte ich einstellen?

2) setze width/height im Container, wenn Zeilen an Requisiten übergeben werden (aber wenn ich die Zeilen in einem anderen Container rendern will, müsste ich den Code dort duplizieren, außer ich erstelle einige.) "globale" Funktion, die das Übergeben von Zeilen an Komponentenstützen in Containern behandelt)

Answer 1

Sie sollten Ihre Reduzierungen als reine Funktionen behalten.Wenn Sie sie mehrmals mit denselben Argumenten aufrufen, haben sie das gleiche erwartete Ergebnis, abhängig nur von den Argumenten.

Das heißt, die Stelle, die Sie diese Art von Logik setzen müssen, heißt Aktion Schöpfer, die eigentlich Ihre addLine Funktion ist.

Aktionsersteller sind genau das - Funktionen, die Aktionen erstellen. Es ist einfach, die Begriffe "Aktion" und "Aktionsersteller" zusammenzufassen, also tun Sie Ihr Bestes, um den richtigen Begriff zu verwenden.

Aktionsersteller können auch asynchron sein und Nebenwirkungen haben.

Erfahren Sie mehr in den docs

Action-Schöpfer können Ihrer aktuellen Zustand bewusst sein, einige Middleware wie redux-thunk Zugabe:

Redux Thunk Middleware ermöglicht Ihnen Aktion Schöpfer zu schreiben, die eine Funktion zurückgeben anstelle einer Aktion. Der Thunk kann verwendet werden, um den Versand einer Aktion zu verzögern oder um nur zu senden, wenn eine bestimmte Bedingung erfüllt ist. Die innere Funktion empfängt die Speichermethoden dispatch und getState als Parameter.