使用react和redux检查每个页面上的用户

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers'; // 根据实际情况引入你的reducer

const store = createStore(rootReducer); // 创建Redux store

// 在应用的入口处使用Provider组件包裹整个应用，以便将store传递给所有组件
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// reducer.js
const initialState = {
  users: [], // 初始状态为空数组，用于存储所有用户
};

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_USER':
      return {
        ...state,
        users: [...state.users, action.payload],
      };
    case 'REMOVE_USER':
      return {
        ...state,
        users: state.users.filter((user) => user.id !== action.payload),
      };
    default:
      return state;
  }
}

export default userReducer;

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function UserList() {
  const users = useSelector((state) => state.users); // 使用useSelector钩子函数从Redux store中获取用户状态
  const dispatch = useDispatch(); // 使用useDispatch钩子函数获取dispatch函数

  const addUser = () => {
    const user = { id: 1, name: 'John' };
    dispatch({ type: 'ADD_USER', payload: user }); // 使用dispatch函数派发一个action来添加用户
  };

  const removeUser = (userId) => {
    dispatch({ type: 'REMOVE_USER', payload: userId }); // 使用dispatch函数派发一个action来移除用户
  };

  return (
    <div>
      <button onClick={addUser}>Add User</button>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}
            <button onClick={() => removeUser(user.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;