Redux - reducer nicht immer genannt
Ich versuche zu lernen Redux. Ich folgte einem online-tutorial und verwendet Ihr Beispiel und es funktionierte gut. Dann machte ich noch einen kleinen test app und es funktionierte gut. Jetzt versuche ich eine andere kleine test-app und ich bin stecken geblieben auf diese Fehlermeldung und habe keine Ahnung, warum.
Die app ist einfach nur ein Eingabefeld und eine Schaltfläche, und klicken Sie auf die Schaltfläche, es fügt sich ganz in die box, um eine Liste, die unten angezeigt wird.
Jedoch der reducer ist nicht die Aktualisierung der Staat. Ich habe die üblichen Probleme, die dies verursachen, und kann nicht scheinen, um diese Fehler in mir, mein Druckminderer nicht ändern, den Staat, und ich habe gebunden der Versand und so weiter. Vielleicht habe ich nur mispelled irgendwo etwas (oder etwas klein und dumm wie, dass), aber ich kann einfach nicht bekommen es funktioniert.
Also habe ich versucht, es zu ändern, so dass es zeigt nur, was Sie in das Feld unten ein und es funktioniert immer NOCH nicht. Wer weiß, warum der reducer nicht aktivieren?
index.js (main)
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import allReducers from './reducers';
import App from './components/App';
const logger = createLogger();
const store = createStore(
allReducers,
applyMiddleware(thunk, promise, logger)
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
App.js
import React from 'react';
import NameList from '../containers/name-list.js'
import Input from '../containers/input.js'
const App = () => (
<div>
<Input />
<hr />
<NameList />
</div>
);
export default App;
index.js (Aktion)
export const addName = (name) => {
return {
type: 'NAME_ADDED',
payload: name
}
};
reducer-add-name.js
export default function (state = null, action) {
switch (action.type) {
case 'NAME_ADDED':
return action.payload;
break;
}
return state;
}
index.js (reducer combiner)
import {combineReducers} from 'redux';
import AddNameReducer from './reducer-add-name';
const allReducers = combineReducers({
nameList: AddNameReducer
});
export default allReducers
input.js
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {addName} from '../actions/index'
class Input extends Component {
render() {
return(
<div>
<input id='name-input' />
<button id='add-name-button' onClick={() => addName(document.getElementById('name-input').value)}>Add name</button>
</div>
);
}
}
function mapStateToProps(state) {
return {
nameList: state.nameList
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({addName: addName}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(Input);
name-list.js
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
class NameList extends Component {
getNameList() {
//This is where I'll loop through this.props.nameList and build the list of elements
return this.props.nameList;
}
render() {
return(
<div>Current list : {this.getNameList()}</div>
);
}
}
function mapStateToProps(state) {
return {
nameList: state.nameList
};
}
export default connect(mapStateToProps)(NameList);
Vielen Dank für jede Hilfe!!!
- Überprüfen Sie die Konsole auf Fehler. Auch ich kann nicht sehen, Ihr reducer exportieren AddNameReducer (was bei der Einfuhr in index.js), aber Sie kann nur knapp verfehlt haben, diese aus der post eher als der eigentliche code.
- Es gibt keine Fehler-Konsole an jedem beliebigen Punkt. Und AddNameReducer ist nur die reducer-add-name.js Datei, die eine einzelne exportierte Funktion.
- Die connect-Funktion in input.js ist mapping-Versand-Methoden, um Requisiten für die Input-Komponente. Also, wenn die Input-Komponente ist die render-Funktion ruft addName es erwarten würde, mit einem Verweis auf diesen als requisite? (Also versuchen, diese.Requisiten.addName)
- Yep, das war es! 🙂 Vielen Dank!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke, deine Aktion noch nicht verschickt worden.
In Ihrem input.js
Auf den button-tag, ändern
zu
Sache ist die Aktion übergeben werden sollen, durch mapDispatchToProps und 'bindActionCreators(Aktionen, Versand)' wird wickeln Sie Ihre Aktion mit 'Versand', und passieren Ihre Komponente über Requisiten 'addName'. (wie definiert in Ihrem mapDispatchToProps)
Einer Aktion allein ist wie eine Kugel (nur Rendite-Objekt), müssen Sie etwas, um es Feuer (Versand)
In Ihrem Fall
erklärt wurde und Ihr onClick -, ohne Versand, es würde nur ein bloßes Objekt, nicht Abfertigung zu reducer.
Aber
ist aus mapDispatchToProps /bindActionCreators... es hat dispatch() gewickelt, das ist die, die wir verwenden würden.
Sollten Sie kombinieren bestehende Zustand mit dem neuen action-payload in reducer-add-name.js statt einfach wieder die payload, d.h.
Diese mir heute passiert ist.
Ich vergessen meine neue Aktion auf meinem destructured Requisiten im Reagieren während der Verwendung der Methode der Klasse