Interpretation und Verwendung verschiedener React-State-Manager

importiere { createStore } von 'redux'
Konstantenspeicher = erstelleSpeicher(fn)

const state = store.getState()

const Aktion = {
    Typ: 'ADD_TODO',
    payload: 'Learc Redux' //Die Nutzlast wird hier als Parameter übergeben, Sie können es leer lassen}

speichern.Versand({
    Typ: „ADD_TODO“
})

const Reducer = (Zustand = {
  Anzahl: 10 //Setze den Anfangswert für die Eigenschaft im Status. Da der Statusmanager nach jeder Aktualisierung gelöscht wird, können wir den letzten gespeicherten Wert vom lokalen Speicherort als Anfangswert abrufen.}, action) => {
  Schalter (Aktion.Typ) {
    Fall 'REDUCE':
          // Hier können wir sehen, dass wir den Aktionstypwert als Schlüsselwert für die Suche verwenden. Beim Versenden können wir die auszuführende Operation basierend auf der Beurteilung dieser Schlüsselwerte finden. return { ...state, count: state.count - action.payload }
          // Entsprechend den Anforderungen der Aktion geben wir ein neues Statusobjekt basierend auf dem ursprünglichen Status zurück, ohne den ursprünglichen Status zu ändern.
    Fall 'ADD':
      return { ...Zustand, Anzahl: Zustand.Anzahl + Aktion.Nutzlast }
   
    Standard:
      Rückgabezustand;
  }
}
 
Standard-Reducer exportieren

Garn hinzufügen unveränderlich -S

importiere { Map } von 'immutable' //Führe die Map-Funktion ein const user = (state = Map({ //Verwende Map, um den Status vollständig zu kopieren
  isLogin: localStorage.getItem('isLogin') === 'true',    
  Token: localStorage.getItem('Token') || '',
  Administratorname: localStorage.getItem('Administratorname') || '',
  Rolle: localStorage.getItem('Rolle') * 1 || 1
}), Aktion) => {
  Schalter (Aktion.Typ) {
    Fall 'CHANGE_LOGIN_STATE':
      return state.set('isLogin', action.payload) //Schreibe Case 'CHANGE_TOKEN' im Set-Modus:
      Rückgabewert: status.set('token', aktion.nutzlast)
    Fall 'CHANGE_ADMIN_NAME':
      Rückgabewert: status.set('Administratorname', Aktion.Nutzlast)
    Fall 'CHANGE_ROLE':
      Rückgabewert: status.set('Rolle', Aktion.Nutzlast)
    Standard:
      Rückgabestatus
  }
}

Standardbenutzer exportieren

Zustand => {
    zurückkehren {
        adminname: state.getIn(['user', 'adminname']), // Den Wert mit der Methode get abrufen, die Parameter haben dieses Format // Die Bedeutung des ersten Parameters: Benutzer im Statusmanager // Die Bedeutung des zweiten Parameters: der Status/das Attribut mit dem Namen adminname}
}

importiere { createStore, combineReducers } von "redux";
// Diese combineReducers-Methode ist der Schlüssel zur modularen Entwicklung. Sie hilft uns, alle Statusmanager der Module zusammenzuführen. importiere pro von './modules/pro'
App aus „./modules/app“ importieren
 
const reducer = combineReducers({ //Alle von Untermodulen erstellten Reducer in diesem Reducer konzentrieren
  Pro, App
})
 
const store = createStore(Reduzierer)
 
Standardspeicher exportieren

// Sie können den Statusmanager in der Komponente über den Provider „verknüpfen“ und eine Verbindung herstellen. Nachdem die Verknüpfung erfolgreich war, können Sie die Zustände und Methoden im Statusmanager verwenden. // /src/xxx/index.jsx
importiere {connect} von 'react-redux'
 
Funktion App (Requisiten) {
    ...
}
Standardmäßig exportieren verbinden(mapStateToProps, mapDispatchToProps)(App)
     
// /index.js
importiere {Provider} von 'react-redux'
App aus „./App.jsx“ importieren
Importiere Store „./store/index.js“
     
ReactDom.render (
    <Reagieren.StrictMode>
        <Anbieter-Store = {Store}>
            <App />
        </Anbieter>
    </React.StrickMode>
)
 
//Sie können auch die High-Order-Funktion des Dekorators @connect @withRouter verwenden
 
//Früher wurden die entsprechenden Daten aus dem Statusbaum entnommen und dann mithilfe der connect()-Methode der react-redux-Klasse Home extends React.Component { über Props an die Komponente übergeben.
    //....
}
Standardmäßig exportieren verbinden (Status => ({todos: Status.todos})) (Home);
 
//Wenn Sie Dekoratoren verwenden, sieht es so aus, was nicht so kompliziert erscheint @connect(state => ({ todos: state.todos }))
Klasse Home erweitert React.Component {
    //....
}

const App = (Eigenschaften) => {
    // Die Komponente kann über Props direkt auf den Status props.adminname im State Manager zugreifen
    Eigenschaften.Anzahl
    props.bannerList
    Eigenschaften.reduceFn
    ...
}
Standardverbindung exportieren (
    // Sie können sehen, dass hier zwei Funktionen übergeben werden und zwei Funktionen zurückgegeben werden. Zustand => {
        zurückkehren {
            adminname: state.getIn(['user', 'adminname']), //So kann der Status gespeichert werden. Über die Anzahl werden wir später sprechen: state.app.count, //Der Parameter ist state. Wir übergeben die Eigenschaft count im App-State-Manager an count in props
            Bannerliste: state.pro.bannerList,
        }
    },
    Versand => {
        zurückkehren {
            reduceFn () { //Wir definieren hier eine ReduceFn, die die Dispatch-Methode enthält. Wir können die ReduceFn-Methode in Props verwenden, um die von „REDUCE“ übermittelten Informationen zu senden dispatch({
                    Typ: 'REDUCE',
                    Nutzlast: 5 //Nutzlast ist ein Parameter, er kann weggelassen werden})
            }
        }
    }
)(App)

//Thunk in store.js einführen und in den State-Manager einbinden import { createStore, combineReducers, applyMiddleware} from 'redux'
 
Thunk von „Redux-Thunk“ importieren
App aus „./modules/app“ importieren
importiere pro aus './modules/pro'
 
const Reducer = kombinierenReducers({
  App, Pro
})
//Thunk über applyMiddleware in den State-Manager einbinden const store = createStore(reducer, applyMiddleware(thunk))
 
Standardspeicher exportieren

// .../store/actionCreator/pro.js
 
// Diese Datei wird speziell zum Auslösen asynchroner Operationen verwendet. // Wenn das Thunk-Modul ausgeführt wird, hat die Funktion actionCreator einen Standardparameter für dispatch
// Mit diesem Dispatch kann der Reducer ausgelöst werden
// Manchmal müssen Sie beim asynchronen Auslösen Parameter übergeben. In diesem Fall können Sie eine actionCreator-Funktion innerhalb der Funktion const actions = { zurückgeben.
  getBannerListAction (Versand) {
    holen('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
      versenden({
        Typ: 'CHANGE_BANNER_LIST',
        Nutzlast: res.data
      })
    })
  },
  getProListAction (Anzahl) { //Mit Parametern, gibt eine Funktion zurück, der Funktionsparameter ist standardmäßig dispatch
    Anzahl = Anzahl || 1
    Rückgabefunktion (Versand) {
      holen('http://121.89.205.189/api/pro/list?count=' + Anzahl)
      .then(res => res.json())
      .then(res => {
        versenden({
          Typ: 'CHANGE_PRO_LIST',
          Nutzlast: res.data
        })
      })
    }
  }
}
 
Standardaktionen exportieren

Aktionen importieren aus „./store/actionCreator/pro“
const App = (Eigenschaften) => {
    // Auf props.reduceFn() kann direkt von props aus zugegriffen werden
    props.addFn()
    props.getBannerList()
    props.getProList()
}
 
const mapStateToProps = (Zustand) => {
  zurückkehren {
    Anzahl: Status.App.Anzahl,
    Bannerliste: state.pro.bannerList,
    proList: state.pro.proList
  }
}
 
const mapDispatchToProps = (Versand) => {
  zurückkehren {
    reduceFn () { //Ändere den Status auf die normale Weise dispatch({       
        Typ: 'REDUCE',
        Nutzlast: 5
      })
    },
    addFn () {
      versenden({
        Typ: 'ADD',
        Nutzlast: 5
      })
    },
    getBannerList () { //Ändern Sie den Status durch die Thunk-Methode dispatch(actions.getBannerListAction)
    },
    getProList () {
      Versand(Aktionen.getProListAction(2))
    }
  }
}
 
Standardmäßig exportieren verbinden(mapStateToProps, mapDispatchToProps)(App)

Garn hinzufügen Redux-Saga unveränderlich Redux-unveränderlich -S

importiere { createStore, combineReducers, applyMiddleware } von 'redux'
 
importiere createSagaMiddleware aus „redux-saga“
 
importiere mySaga von './mySaga' //Anweisungen für asynchrone Operationen importiere home von './modules/home'
App aus „./modules/app“ importieren
 
const Reducer = kombinierenReducers({
  App,
  heim
})
 
const sagaMiddleware = createSagaMiddleware() //Saga-Middleware generieren const store = createStore(reducer, applyMiddleware(sagaMiddleware))
//Eine Verbindung herstellen //Wie bei Thunk wird die Saga-Middleware in den State-Manager eingebunden. Anschließend können Sie den Status mit der Saga-Methode ändern sagaMiddleware.run(mySaga)
//ausführen: Senden // Hier ist eine mySage-Funktion, die als Funktion zum Ändern des Status des Export-Standardspeichers gekapselt ist

importiere { call, put, takeLatest } von 'redux-saga/effects'
 
importiere { getBannerList, getProList } von '../api/home'
 
// redux-saga ---> Muss mit der Generatorfunktion verwendet werden function * getBannerListAction() {
  const res = yield call(getBannerList) //Aufruf - Funktion „yield put“ aufrufen ({
    Typ: 'CHANGE_BANNER_LIST',
    Nutzlast: res.data
  })
}
Funktion * getProListAction (Aktion) {
  const res = yield call(getProList, Aktion.Nutzlast)
  Rendite setzen({
    Typ: 'CHANGE_PRO_LIST',
    Nutzlast: res.data
  })
}
 
Funktion * meineSaga () {
  Ergebnis: takeLatest('REQUEST_BANNER_LIST', getBannerListAction)
  Ergebnis: takeLatest('REQUEST_PRO_LIST', getProListAction)
}
 
Standardmäßig mySaga exportieren

// In der Datei mysaga definieren wir die Sendemethode import { takeLatest } from 'redux-saga/effects'
// takeLatest --- Aufgaben zuweisen; unten. Wir definieren den Schlüssel und weisen ihm Ereignisse zu. Diese Ereignisse sind die Funktionen, die von der Funktion store.dispatch() verwendet werden. * getProListAction (Aktion){
  const res = yield call(getProList, Aktion.Nutzlast)
  Rendite setzen({
    Typ: 'CHANGE_PRO_LIST',
    Nutzlast: res.data
  })
}
Funktion * meineSaga () {
  Ergebnis: takeLatest('REQUEST_PRO_LIST', getProListAction)
}
 
// Wenn wir den Status in Zukunft ändern möchten, müssen wir dafür nicht store.dispatch() verwenden. // Wir können dafür den in dieser Datei definierten Schlüsselwert verwenden. // Wir definieren eine benutzerdefinierte Funktion im Connect der Komponente wie folgt und rufen hier die Änderungsmethode dispatch direkt entsprechend dem Schlüsselwert auf => {
    Versand ({ Typ: 'REQUEST_PRO_LIST'})
}
 
 
// setzen, aufrufen
// call ---> bedeutet aufrufen // put ---> bedeutet pushen, die aktuelle Aktion zur nächsten auszuführenden Aktion (Warteschlange) verschieben.
 
Rendite Put (Aktion)
Aufruf ausführen (fn)