在firebase中使用redux更新用户配置文件信息

npm install firebase react-redux redux-thunk

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 你的根reducer

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

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

import firebase from 'firebase/app';
import 'firebase/firestore';

// 更新用户配置文件信息的action creator
export const updateUserInfo = (userId, newInfo) => {
  return async (dispatch) => {
    try {
      // 更新用户配置文件信息的逻辑
      await firebase.firestore().collection('users').doc(userId).update(newInfo);

      // 更新成功后，将更新后的信息派发到Redux store中
      dispatch({ type: 'UPDATE_USER_INFO_SUCCESS', payload: newInfo });
    } catch (error) {
      // 更新失败时，派发错误信息到Redux store中
      dispatch({ type: 'UPDATE_USER_INFO_FAILURE', payload: error.message });
    }
  };
};

const initialState = {
  userInfo: {},
  error: null,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_USER_INFO_SUCCESS':
      return {
        ...state,
        userInfo: action.payload,
        error: null,
      };
    case 'UPDATE_USER_INFO_FAILURE':
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default userReducer;

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { updateUserInfo } from './actions/userActions';

const UserProfile = ({ userInfo, error, updateUserInfo }) => {
  const [newInfo, setNewInfo] = useState('');

  const handleUpdate = () => {
    updateUserInfo(userInfo.userId, newInfo);
  };

  return (
    <div>
      <input type="text" value={newInfo} onChange={(e) => setNewInfo(e.target.value)} />
      <button onClick={handleUpdate}>更新配置文件信息</button>
      {error && <p>{error}</p>}
    </div>
  );
};

const mapStateToProps = (state) => ({
  userInfo: state.userInfo,
  error: state.error,
});

const mapDispatchToProps = {
  updateUserInfo,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);