内容穿梭js代码

npm install redux react-redux

// store.js
import { createStore } from 'redux';

const initialState = {
  user: null,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);
export default store;

// index.js
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')
);

// UserProfile.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function UserProfile() {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();

  const handleLogin = () => {
    // 假设这里有一些登录逻辑
    const userInfo = { name: 'John Doe', email: 'john@example.com' };
    dispatch({ type: 'SET_USER', payload: userInfo });
  };

  return (
    <div>
      {user ? (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

export default UserProfile;