Ich habe eine einfache React-Komponente, die ich verbinde (Zuordnung eines einfachen Arrays / Status über). Um nicht auf den Kontext für das Geschäft zu verweisen, möchte ich eine Möglichkeit haben, den "Versand" direkt von den Requisiten zu erhalten. Ich habe andere gesehen, die diesen Ansatz verwendet haben, aber aus irgendeinem Grund keinen Zugriff darauf haben :)
Hier sind die Versionen jeder npm-Abhängigkeit, die ich derzeit verwende
"react": "0.14.3",
"react-redux": "^4.0.0",
"react-router": "1.0.1",
"redux": "^3.0.4",
"redux-thunk": "^1.0.2"
Hier ist die Komponente mit Verbindungsmethode
class Users extends React.Component {
render() {
const { people } = this.props;
return (
<div>
<div>{this.props.children}</div>
<button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button>
</div>
);
}
};
function mapStateToProps(state) {
return { people: state.people };
}
export default connect(mapStateToProps, {
fetchUsers
})(Users);
Wenn Sie den Reduzierer sehen müssen (nichts Aufregendes, aber hier ist es)
const initialState = {
people: []
};
export default function(state=initialState, action) {
if (action.type === ActionTypes.ADD_USER) {
let newPeople = state.people.concat([{id: action.id, name: 'wat'}]);
return {people: newPeople};
}
return state;
};
Wenn Sie sehen möchten, wie mein Router mit Redux konfiguriert ist
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
const store = createStoreWithMiddleware(reducers);
var Route = (
<Provider store={store}>
<Router history={createBrowserHistory()}>
{Routes}
</Router>
</Provider>
);
aktualisieren
Wenn ich meinen eigenen Versand in der Verbindung weglasse (derzeit oben zeige ich fetchUsers), würde ich den Versand kostenlos erhalten (nur nicht sicher, ob ein Setup mit asynchronen Aktionen normalerweise so funktioniert). Mischen sich die Leute oder ist es alles oder nichts?
[mapDispatchToProps]
quelle
bindActionCreators(actionCreators, dispatch)
optional? Ich habe in Ihrem Code an der// es7 spread syntax
Zeile bemerkt , dass derdispatch
nicht anbindActionCreators
function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ increment, decrement }), dispatch }; }
Sie können normalerweise basierend auf dem, was Sie möchten, mischen und anpassen.
Sie können passieren
dispatch
als Stütze auf , wenn das ist , was Sie wollen:Ich bin nicht sicher, wie
fetchUsers
es verwendet wird (als asynchrone Funktion?), Aber Sie würden normalerweise so etwas wiebindActionCreators
das automatische Binden des Versands verwenden und müssten sich dann nicht um diedispatch
direkte Verwendung in verbundenen Komponenten kümmern .Wenn Sie ein
dispatch
Verzeichnis verwenden, wird die dumme , zustandslose Komponente mit Redux gekoppelt. Was es weniger tragbar machen kann.quelle
fetchUsers
Injektion als Requisite. Die Shortcut-Notation funktioniert nur, wenn Sie ein Objekt als zweites Argument übergeben. Wenn Sie eine Funktion übergeben, müssen Sie sichbindActionCreators
selbst aufrufen :dispatch => ({ ...bindActionCreators({ fetchUsers }, dispatch), dispatch })
.dispatch => ( bindActionCreators({ dispatch, fetchUsers }, dispatch))
Während Sie
dispatch
als Teil von weitergeben könntendispatchToProps
, würde ich empfehlen, den Zugriff aufstore
oderdispatch
direkt von Ihren Komponenten aus zu vermeiden . Es scheint, als wären Sie besser bedient, wenn Sie im zweiten Argument von connect einen gebundenen Aktionsersteller übergebendispatchToProps
Sehen Sie sich ein Beispiel an, das ich hier https://stackoverflow.com/a/34455431/2644281 gepostet habe, wie Sie einen "bereits gebundenen Aktionsersteller" auf diese Weise weitergeben, damit Ihre Komponenten nicht direkt über das Geschäft / den Versand Bescheid wissen oder von diesem abhängen müssen .
Tut mir leid, mich kurz zu fassen. Ich werde mit mehr Infos aktualisieren.
quelle