在React Redux应用中,有几个特定部分可能需要处理不确定的情况,包括:
Redux Thunk示例:
// action creator
const fetchData = () => {
return (dispatch) => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
// Simulate an asynchronous API call
setTimeout(() => {
const data = 'Data fetched successfully';
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
}, 2000);
};
};
// reducer
const initialState = {
isLoading: false,
data: null,
error: null
};
const dataReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, isLoading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, isLoading: false, data: action.payload };
case 'FETCH_DATA_ERROR':
return { ...state, isLoading: false, error: action.payload };
default:
return state;
}
};
// component
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from '../actions';
const DataComponent = () => {
const dispatch = useDispatch();
const { isLoading, data, error } = useSelector((state) => state.data);
useEffect(() => {
dispatch(fetchData());
}, [dispatch]);
if (isLoading) {
return Loading...;
}
if (error) {
return Error: {error};
}
return Data: {data};
};
export default DataComponent;
Redux Form示例:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const validate = (values) => {
const errors = {};
if (!values.username) {
errors.username = 'Username is required';
}
if (!values.password) {
errors.password = 'Password is required';
}
return errors;
};
const LoginForm = (props) => {
const { handleSubmit, submitting, error } = props;
return (
);
};
export default reduxForm({
form: 'loginForm',
validate
})(LoginForm);
条件渲染示例:
import React from 'react';
import { useSelector } from 'react-redux';
const ConditionalComponent = () => {
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
return (
{isLoggedIn ? (
User is logged in
) : (
User is not logged in
)}
);
};
export default ConditionalComponent;
以上是处理React Redux应用中特定部分不确定性的一些解决方案,具体的处理方法可以根据实际情况选择适合的方式。