Redux là một vùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript.

Nó giúp bạn viết các ứng dụng hoạt động nhất quán, chạy trong các môi trường khác nhau (máy khách, máy chủ và bản địa) và dễ kiểm tra. Trên hết, nó cung cấp trải nghiệm tuyệt vời cho nhà phát triển.

Cài đặt

Để cài đặt redux trong react native. Chúng tôi sẽ cài đặt các gói sau.

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

1. Hành động
2. Bộ giảm tốc
3. index.js

Thêm mã sau đây trong styles.js

export const SAVE_TOKEN = 'SAVE_TOKEN';

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

Thêm mã sau vào 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);

Thêm mã sau vào tệp 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