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 =)
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
Danke Mann, ich werde es sicher anschauen. –