如何使用React和Redux重置密码？

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

// actions.js
export const RESET_PASSWORD_REQUEST = 'RESET_PASSWORD_REQUEST';
export const RESET_PASSWORD_SUCCESS = 'RESET_PASSWORD_SUCCESS';
export const RESET_PASSWORD_FAILURE = 'RESET_PASSWORD_FAILURE';

export const resetPasswordRequest = () => ({
  type: RESET_PASSWORD_REQUEST
});

export const resetPasswordSuccess = () => ({
  type: RESET_PASSWORD_SUCCESS
});

export const resetPasswordFailure = error => ({
  type: RESET_PASSWORD_FAILURE,
  payload: error
});

// reducer.js
import {
  RESET_PASSWORD_REQUEST,
  RESET_PASSWORD_SUCCESS,
  RESET_PASSWORD_FAILURE
} from './actions';

const initialState = {
  isResetting: false,
  error: null
};

const passwordReducer = (state = initialState, action) => {
  switch (action.type) {
    case RESET_PASSWORD_REQUEST:
      return { ...state, isResetting: true };
    case RESET_PASSWORD_SUCCESS:
      return { ...state, isResetting: false };
    case RESET_PASSWORD_FAILURE:
      return { ...state, isResetting: false, error: action.payload };
    default:
      return state;
  }
};

export default passwordReducer;

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { resetPasswordRequest } from './actions';

const ResetPasswordForm = () => {
  const [email, setEmail] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = e => {
    e.preventDefault();
    dispatch(resetPasswordRequest(email));
    // 这里可以添加实际的API调用来处理密码重置
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Reset Password</button>
    </form>
  );
};

export default ResetPasswordForm;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// 使用Redux Thunk处理异步逻辑
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));