Redux est un conteneur d'état prévisible pour les applications JavaScript.

Il vous aide à écrire des applications qui se comportent de manière cohérente, s'exécutent dans différents environnements (client, serveur et natif) et sont faciles à tester. En plus de cela, il offre une excellente expérience de développement.

Installation

Afin d'installer le redux dans react native. Nous installerons les packages suivants.

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

1. Actions
2. Réducteurs
3. index.js

Ajoutez le code suivant dans types.js

export const SAVE_TOKEN = 'SAVE_TOKEN';

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

Ajoutez le code suivant dans le fichier index.js

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);

Ajoutez le code suivant dans le fichier App.js

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