我遇到Redux问题,因为我对**React-native Redux非常陌生。**我需要在按下按钮时更新Redux数据。
我的登录屏幕代码:
if (checkValid) {
updateState({isLoading: true});
try {
const res = await actions.login({
email,
password,
});
} catch (error) {
showError(error.msg);
updateState({isLoading: false});
}
}
Redux验证码
import {LOGIN, SIGNUP} from '../../config/urls';
import {
apiPost,
clearUserData,
setUserData,
refreshUserData,
} from '../../utils/utils';
import {showError, showSuccess} from '../../utils/helperFunction';
import store from '../store';
import types from '../types';
const {dispatch} = store;
export const saveUserData = data => {
dispatch({
type: types.LOGIN,
payload: data,
});
};
export function login(data) {
return new Promise((resolve, reject) => {
return apiPost(LOGIN, data)
.then(res => {
if (res.code == 400) {
showError(res.message);
} else if (res.code == 200) {
showSuccess(res.message);
setUserData(res.results).then(() => {
resolve(res);
saveUserData(res.results);
});
return;
}
resolve(res);
})
.catch(error => {
reject(error);
});
});
}
export function signup(data) {
return apiPost(SIGNUP, data);
}
export function logout() {
dispatch({type: types.CLEAR_REDUX_STATE});
showSuccess('User has been Logout successfully');
clearUserData();
}
export function Update() {
dispatch({type: types.UPDATE_REDUX_STATE});
showSuccess('Data Updated successfully');
refreshUserData();
}
我的减速器代码
import types from '../types';
const initial_state = {
userData: {},
is_verify: false,
customer_first_time_login: false,
};
export default function (state = initial_state, action) {
switch (action.type) {
case types.LOGIN:
const data = action.payload;
return {userData: data};
case types.UPDATE_REDUX_STATE:
const updateData = action.payload;
return {userData: updateData};
default:
return {...state};
}
}
我的效用
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import store from '../redux/store';
import types from '../redux/types';
import {saveUserData} from '../redux/actions/auth';
import {showError} from './helperFunction';
const {dispatch, getState} = store;
export async function getHeaders() {
let userData = await AsyncStorage.getItem('userData');
if (userData) {
userData = JSON.parse(userData);
return {
authorization: `${userData.access_token}`,
};
}
return {};
}
export async function apiReq(
endPoint,
data,
method,
headers,
requestOptions = {},
) {
return new Promise(async (res, rej) => {
const getTokenHeader = await getHeaders();
headers = {
...getTokenHeader,
...headers,
};
if (method === 'get' || method === 'delete') {
data = {
...requestOptions,
...data,
headers,
};
}
axios[method](endPoint, data, {headers})
.then(result => {
const {data} = result;
if (data.status === false) {
return rej(data);
}
return res(data);
})
.catch(error => {
if (error && error.response && error.response.status === 401) {
clearUserData();
dispatch({
type: types.CLEAR_REDUX_STATE,
payload: {},
});
dispatch({
type: types.NO_INTERNET,
payload: {internetConnection: true},
});
}
if (error && error.response && error.response.data) {
if (!error.response.data.message) {
return rej({
...error.response.data,
msg: error.response.data.message || 'Network Error',
});
}
return rej(error.response.data);
} else {
return rej({message: 'Network Error', msg: 'Network Error'});
}
return rej(error);
});
});
}
export function apiPost(endPoint, data, headers = {}) {
return apiReq(endPoint, data, 'post', headers);
}
export function apiDelete(endPoint, data, headers = {}) {
return apiReq(endPoint, data, 'delete', headers);
}
export function apiGet(endPoint, data, headers = {}, requestOptions) {
return apiReq(endPoint, data, 'get', headers, requestOptions);
}
export function apiPut(endPoint, data, headers = {}) {
return apiReq(endPoint, data, 'put', headers);
}
export function setItem(key, data) {
data = JSON.stringify(data);
return AsyncStorage.setItem(key, data);
}
export function getItem(key) {
return new Promise((resolve, reject) => {
AsyncStorage.getItem(key).then(data => {
resolve(JSON.parse(data));
});
});
}
export function removeItem(key) {
return AsyncStorage.removeItem(key);
}
export function clearAsyncStorate(key) {
return AsyncStorage.clear();
}
export function setUserData(data) {
data = JSON.stringify(data);
return AsyncStorage.setItem('userData', data);
}
export async function getUserData() {
return new Promise((resolve, reject) => {
AsyncStorage.getItem('userData').then(data => {
resolve(JSON.parse(data));
});
});
}
export async function refreshUserData(endPoint, data = null, headers = {}) {
return axios
.get(endPoint)
.then(res => {
//comment below code to overcome the error
AsyncStorage.setItem('userData', JSON.stringify(user));
setUserData(res.data);
setUserData(res.data).then(() => {
saveUserData(res.data);
});
return res;
})
.catch(error => {
showError('Something went wrong');
});
}
export async function clearUserData() {
return AsyncStorage.removeItem('userData');
}
现在,我需要将用户导航至FirstTimeLogin屏幕,当用户成功登录时,用户可以在输入详细信息后输入详细信息,用户导航至主屏幕。
我为每个导航(如AuthStack、MainStack和FirstTimeLoginStack)创建了单独堆栈。因此,我的问题是,当用户成功登录时,它会自动导航到FirstTimeLogin,但当用户在FirstTimeLogin中输入详细信息并按下按钮时,它不会导航到MainScreen,这意味着Redux状态不会像用户登录时那样更新
路线屏幕:
export default function Routes() {
const userData = useSelector(state => state.auth.userData);
let showscreen;
if (userData != null && userData.access_token != null) {
if (userData.type == 'doctor') {
if (userData.doctor_detail == null) {
showscreen = [DoctorFTL(Stack)];
} else {
showscreen = [DoctorStack(Stack)];
}
}
} else {
showscreen = [AuthStack(Stack)];
}
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
{showscreen}
</Stack.Navigator>
</NavigationContainer>
);
}
1条答案
按热度按时间ulydmbyx1#
首先,您必须查看Redux的文档,因为您说您对Redux非常陌生。Redux Documentation
此链接将帮助您解决问题。Solution link 1Solution Link 2