Redux auf funktionalen Komponenten in Reactjs (Web)

Question

Ich schreibe diese Frage, denn ich möchte Sie um etwas Hilfe bei der Verwendung der Redux auf meine funktionalen Komponenten bitten. Ich habe mir andere Beispiele mit React-Komponenten angeschaut, aber ich kann nicht verstehen, wie man den "Speicher" -Wert in funktionale Komponenten bekommt.

Meine Idee ist meinen

store.getState()

verwenden Staaten zu überprüfen und mit der Benutzeroberfläche in meiner funktionalen Komponente in Wechselwirkung treten, aber ich kann es nicht passieren.

Irgendwelche Hilfe bitte?

Zum Beispiel kann eine funktionelle Komponente:

import React from 'react'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Header.css'; 
import { Navbar, Nav } from 'react-bootstrap'; 
import HeaderMenu from '../HeaderMenu'; 
import cx from 'classnames'; 

function Header() { 
    return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}> 
     <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav> 
     <HeaderMenu /> 
    </Navbar> 
); 
} 

export default withStyles(s)(Header); 

Wie kann ich das „store“ Objekt in meinem Kopf Komponente verwenden? Es funktioniert auf meiner App-Komponente, nur ich weiß nicht, wie ich es in meinen Komponenten verwenden soll.

Meine Fragen sind:

• Soll ich Aktionen verwenden, anstatt den Zustand für das Abrufen ??
• Sollte ich die Speicherobjektkomponente an die Komponenteneigenschaften übergeben?

Vielen Dank im Voraus!

EDIT:

I https://github.com/kriasoft/react-starter-kit mit dem redux Zweig bin mit https://github.com/kriasoft/react-starter-kit/tree/feature/redux

Answer 1

Als Dan Abramov in seiner irrsinnig berühmten Serie Egghead.io erwähnt, sollte Präsentations-Komponente nicht bewusst sein, von Redux speichern und shouldn‘ t verwende es direkt. Sie should create something called container component, die notwendige Statusfelder + Aktionsrückrufe zu Ihrer Präsentationskomponente über Eigenschaften übergeben.

Ich empfehle dringend, Dan Abramov Egghead.io-Serie zu sehen, wenn die obigen Konzepte Ihnen nicht vertraut sind. Muster, die er dort beschreibt, sind de facto Standard-Style-Guide zum Schreiben von React + Redux-Anwendungen heutzutage.

Answer 2

Versuchen Sie, die einzelnen Module/Komponenten zu verstehen, die ein Boilerplate-Projekt enthält, bevor Sie damit beginnen. Wenn Sie neu zu reagieren (und seine komplementären Bibliotheken) Ich empfehle starten Sie hier:

• https://github.com/petehunt/react-howto

Für redux:

• http://redux.js.org/

Dies sind beide große Ressourcen, die den Großteil der reaktiven Fragen zum Stackoverflow klären.

Answer 3

Sie können react-redux library verwenden, und mit connect werden Sie auf Ihre store Daten als Komponente Requisiten zugreifen - es ist einfach und effizient.

Answer 4

Wenn Sie den Redux-Status für eine Funktionskomponente erhalten möchten, müssen Sie entweder die Komponente und Redux manuell verbinden, was sehr mühsam ist. Sie müssten auf die Reducer-Variable in Ihrer React Component zugreifen, was bedeutet, dass Sie den Reducer unter anderen Konfigurationen in die Komponentendatei importieren.

Dies würde andere Vorteile beeinträchtigen, die Sie normalerweise erhalten würden, z. B. Aktionsersteller, Aktionen automatisch über die Middleware und vieles mehr.

Eine sauberere Idee ist es, nur die Provider-Komponente zu verwenden, die mit React-Redux kommt, um Ihre Header-Komponente in einen Container zu verwandeln. Ein Container ist eine Reaktionskomponente, die auf Änderungen im Geschäft "lauscht". Sie verpacken Ihre Header-Komponente im Wesentlichen in einer Komponente höherer Ordnung, die direkt mit dem Redux-Store verbunden ist.

Dieser Weg ist skalierbarer und Sie können einfach eine Vorlagendatei erstellen, die mit jedem React/Redux-Projekt verwendet werden kann.