Redux ist ein vorhersehbarer Statuscontainer für JavaScript-Apps.

Sie können damit Anwendungen schreiben, die sich konsistent verhalten, in verschiedenen Umgebungen (Client, Server und native) ausgeführt werden und einfach zu testen sind. Darüber hinaus bietet es eine großartige Entwicklererfahrung.

Installation

Um den Redux in React Native zu installieren. Wir werden die folgenden Pakete installieren.

yarn add react-redux redux redux-persist redux-thunk @react-native-community/async-storage

1. Aktionen
2. Reduzierstücke
3. index.js

Fügen Sie den folgenden Code in types.js hinzu

export const SAVE_TOKEN = 'SAVE_TOKEN';

import { SAVE_TOKEN } from './types';
export const saveToken = (key) => ({
  type: SAVE_TOKEN,
  payload: key
});

Fügen Sie den folgenden Code in die index.js ein

import { SAVE_TOKEN } from '../actions/types';
const initialState = {
 token: ''
};
const Reducer = (state = initialState, action) => {
switch (action.type) {
case SAVE_TOKEN:
 return {
   ...state,
   token: action.payload,
};
default: 
 return state;
}
};
export default Reducer;

import {applyMiddleware, combineReducers, createStore, compose} from 'redux';
import thunk from 'redux-thunk';
import {persistStore, persistReducer} from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';
import Reducer from './reducers';
// Redux Debugger
let composeEnhancer = compose;
if (__DEV__) {
composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}
const Reducers = {
 appData: Reducer
};
const persistConfig = {
 key: 'root',
 storage: AsyncStorage,
 blacklist: ['navigation'], // navigation will not be persisted
 // stateReconciler: autoMergeLevel2,
 // timeout: 100000,
};
const persistedReducer = persistReducer(
 persistConfig,
 combineReducers(Reducers),
);
export const Store = createStore( 
 persistedReducer,composeEnhancer(applyMiddleware(thunk))
);
export const persistor = persistStore(Store);

Fügen Sie den folgenden Code in die Datei App.js ein

import React from 'react';
import {Route} from './src/navigation/routes';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {Store, persistor} from './src/store';
import {StatusBar} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
const App = () => {
 RNBootSplash.hide();
 return (
  <Provider store={Store}>
   <PersistGate loading={null} persistor={persistor}>
   <StatusBar backgroundColor="#000" barStyle="light-content" /
    <Route />
   </PersistGate>
  </Provider>
);
};
export default App;

import React, {useState, useEffect} from 'react';
import {persistor} from '../store';
import * as wpActions from '../../store/actions';
import {useSelector, useDispatch} from 'react-redux';
const Login = ({navigation}) => {
 const dispatch = useDispatch();
 const [code, setCode] = useState('');
 const details = useSelector((state) => state.appData.details);
 console.log(details);
// Comment this code if not clearing database.
 useEffect(() => {
  persistor.purge;
  console.log('purging database');
 }, []);
 
 const sendToken=()=>{ 
   dispatch(wpActions.saveToken(code))
 }

yarn add @react-native-community/async-storage @react-native-community/masked-view  @react-navigation/drawer @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated react-native-responsive-screen react-native-safe-area-context react-native-screens react-native-vector-icons react-redux redux redux-persist redux-thunk