2016-11-12 3 views
2

Redux hat sich als etwas schwierig für mich erwiesen, mich einzuwickeln, und ich fragte mich, ob jemand mir helfen könnte, in die richtige Richtung zu zeigen, was ich nicht begreife, um meine gewünschten Ergebnisse zu erzielen. Nur eine Vorwarnung: Ich benutze ES6 Syntax.React Redux Confusion

Okay, also habe ich etwas von einer Sandbox eingerichtet, um zu testen, wie redux funktioniert, und dies ist das aktuelle Datei-Setup, mit dem ich arbeite.

-actions 
    --index.js 
-reducers 
    --index.js 
    --reducer_user.js 
-containers 
    --ReduxTest.js 

In meinem Container, ReduxTest.js, habe ich den folgenden Code.

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchUser } from '../actions/index'; 

class ReduxTest extends Component { 
    render() { 
    return (
     <div> 
     {console.log(this.props.fetchUser())} 
     {console.log(this.props.user)} 
     </div> 
    ) 
    } 
} 

export default connect(null, { fetchUser }) (ReduxTest); 

Wenn I ReduxTest.js auf dem Bildschirm, wobei die erste Anweisung console.log rendern zeigt sich als,

Object { type: "FETCH_USER", payload: "This is just a test."} 

Die zweite jedoch als "undefiniert" erscheint.

Hier ist, was meine Handlungen ist index.js wie sieht

export const FETCH_USER = 'FETCH_USER'; 

export function fetchUser() { 
    const testing = "This is just a test."; 
    return { 
    type: FETCH_USER, 
    payload: testing 
    } 
} 

Hier ist mein reducer_user.js meine index.js im Minderer

import { FETCH_USER } from '../actions/index'; 

export default function(state = null, action) { 
    switch(action.type) { 
    case FETCH_USER: 
    return action.payload; 
    } 
    return state; 
} 

und schließlich, ist hier Datei Ordner

import { combineReducers } from 'redux'; 
import UserReducer from './reducer_user'; 

const rootReducer = combineReducers({ 
    user: UserReducer 
}); 

export default rootReducer; 

Ich benutze ein Video-Tutorial von Udemy, also Dort bekomme ich etwas von meiner Syntax und was nicht. Ich hatte den Eindruck, dass ich "this.props.user" aus dem index.js Reducer erreichen könnte, aber ich mache etwas falsch oder verpasse einen Schritt. Jede Hilfe wäre willkommen.

Nur damit ich klar bin, meine ganze Absicht ist es, erfolgreich die ReduxTest Container-Konsole log JUST die Zeichenfolge, die in der Nutzlast ist. Wenn du damit helfen kannst, denke ich, dass ich es von dort weitertragen kann. Danke =)

+0

FYI, halte ich eine große Liste von Links zu qualitativ hochwertigen Tutorials reagieren, Redux und verwandte Themen, unter https: // github.com/markerikson/react-redux-links. Speziell als idealer Ausgangspunkt für alle, die das Ökosystem lernen wollen. – markerikson

+0

Danke Mann, ich werde es sicher anschauen. –

Antwort

2

Sie übergeben nur den Aktionsersteller an Ihre Komponente. Wenn Sie auf Ihre props.user zugreifen möchten, müssen Sie diese angeben. Dies erreichen Sie mit dem ersten Argument der connect-Funktion.

const mapStateToProps = state => ({ 
    user: state.user, 
}); 

export default connect(mapStateToProps, { fetchUser })(ReduxTest); 

Das erste Argument von connect muss eine aufrufbare Funktion sein. Das einzige Argument dieser Funktion ist der aktuelle Status. Die Funktion muss ein Objekt zurückgeben, das alle Eigenschaften enthält, auf die Sie in Ihrer Komponente zugreifen möchten.

Bitte beachten Sie, dass der Status Ihres Benutzerreduzierers anfänglich auf Null gesetzt ist. Redux löst mehrere interne Aktionen aus. Wenn Sie Ihren aktuellen Status in Ihrer Rendermethode protokollieren, kann es passieren, dass Ihr Status protokolliert wird vor Sie Ihre eigenen Aktionen aufrufen. Dies kann verwirrend sein.

Sie können den Ausgangszustand Ihres Minderer auf diese Weise ändern:

import { FETCH_USER } from '../actions/index'; 

export default function(state = 'User not fetched yet', action) { 
    switch(action.type) { 
    case FETCH_USER: 
     return action.payload; 
    } 

    return state; 
} 
+0

Hey, danke für die gründliche Antwort. Ich habe das versucht und stattdessen versucht, eine console.log innerhalb einer componentDidMount-Methode in meinem Container zu machen, und ich bekomme immer noch undefiniert. Ich habe keine Ahnung, warum ich in meinem Reducer sogar den Status auf Null setze, ich habe es einfach getan, weil das Tutorial, das ich mir angesehen habe, das benutzt hat. Gibt es eine schnelle Möglichkeit, den Code neu zu gestalten, damit er ordnungsgemäß funktioniert? –

+0

Sie können Ihre Eigenschaften in Ihrer Rendermethode verwenden, kein Problem. Kopieren Sie einfach den Code oben in Ihren Container und es sollte gut funktionieren. Ich habe meine Antwort für die Ausgangsfrage aktualisiert. –

+0

Sie der Mann ... es hat funktioniert. Das war eine enorme Hilfe. Vielen Dank. Nur damit mir klar ist, habe ich das Konsolenprotokoll ausgedruckt "Benutzer noch nicht abgerufen". Theoretisch muss ich nur einen Ereignistyp in der Komponente einrichten, der ausgelöst wird, und den neuen Zustand auf das einstellen, was ich will. Habe ich in dieser Aussage Recht? –