Reactjs 如何使用Reducer更新全局变量

如果您想要将选定的用户ID设置为状态，那么以下是我建议的更改/添加.

• 添加新的setUserId操作以设置当前选定的userId
• 在按钮的onClick处理程序中调度setUserId操作
• 读取目标组件中的当前userId状态值

示例:

const initialState = {
  userId: null
  // Your global state properties here (e.g., count: 0, data: [])
};

export const idSlice = createSlice({
  name: 'id',
  initialState,
  reducers: {
    ....,
    setUserId: (state, action) => {
      state.userId = action.payload;
    },
  },
});

export const {
  ....,
  setUserId,
} = idSlice.actions;

import { useDispatch } from 'react-redux';
import { setUserId } from '../path/to/idSlice;'

export default function FileOne() {
  const dispatch = useDispatch();

  return usersData.map(userData => (
    <Link key={userData.id} to='/fileTwo'>
      <button onClick={() => dispatch(setUserId(userData.id))}>
        {userData.id}
      </button>
    </Link>
  );
}

import { useSelector } from 'react-redux';

const FileTwo = () => {
  const selectedUserId = useSelector(state => state.id.userId);

  ...
};

无论如何，这看起来像是相当短暂的状态，而且可能不需要存储在Reduxstore 中的任何东西.由于您使用的是Link组件(assumed React-Router library usage here)并实现导航操作，因此您可能只需要在导航操作中包括用户ID，即在URL路径中，即"/fileTwo/:userId"中，或者在路径状态中.

• 在路由状态下超过userData.id:

  import { Link } from 'react-router-dom';
  
  export default function FileOne() {
    const dispatch = useDispatch();
  
    return usersData.map(userData => (
      <Link key={userData.id} to='/fileTwo' state={{ userId: userData.id }}>
        {userData.id}
      </Link>
    );
  }
  

  import { useLocation } from 'react-router-dom';
  
  const FileTwo = () => {
    const { state } = useLocation();
    const { userId } = state ?? {};
  
    ...
  };
  

• URL路径段中超过userData.id:

  <Route
    path="/fileTwo/:userId?"
    element={<FileTwo />}
  </Route>
  

  import { Link } from 'react-router-dom';
  
  export default function FileOne() {
    const dispatch = useDispatch();
  
    return usersData.map(userData => (
      <Link key={userData.id} to={`/fileTwo/${userData.id}`}>
        {userData.id}
      </Link>
    );
  }
  

  import { useParams } from 'react-router-dom';
  
  const FileTwo = () => {
    const { userId } = useParams();
  
    ...
  };