如何通过单击按钮从反应组件修改 redux 变量状态？

Question

我从事 react-redux 项目已经有一段时间了。在 redux 中，我有一个初始状态为 0 的 id 变量。我希望在单击按钮时更改此值。为此，我有两个按钮，button1 和 button2。当我点击 button1 时，我想将 id 状态更改为 1 和 2 当我点击 button2.

这是我的代码。

idReducer.js

const processReducer = (state = 0, action) => {
  switch (action.type) {
    case "ID":
      return state;
    default:
      return state;
  }
};
export { processReducer };

action.js

export const id = () => {
  return {
    type: "ID",
  };
};

reducerAll.js

import { combineReducers } from "redux";
import { tokenReducer } from "./tokenReducer";
import { userDataReducer } from "./userReducer";
import { userStatusReducer } from "./userStatusReducer";
import { assetRiskReducer } from "./assetRiskReducer";
import { cpeReducer } from "./cpeReducer";
import { processReducer } from "./processReducer";

export default combineReducers({
  token: tokenReducer,
  user: userDataReducer,
  user_status: userStatusReducer,
  assetRisk: assetRiskReducer,
  id: processReducer,//MY ID REDUCER
});

ChangeState.js 组件有两个按钮来改变 id

的状态

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { id } from "./../../../auth/store/actions/index";
const ChangeState = () => {
  const id = useSelector((state) => state.id); //initial state of id=0
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={}>button1</button>
      <button onClick={}>button2</button>
    </div>
  );
};

export default ChangeState;

问题：当button1点击的时候，我想把id的状态改成1 和 2 当 button2 单击时。

谢谢。

Answer 1

您需要修改您的 reducer 以实际使用 paylad 做一些事情：


const processReducer = (state = 0, action) => {
  switch (action.type) {
    case "ID":
      return action.payload;
    default:
      return state;
  }
};
export { processReducer };

使您的操作将 id 作为有效负载传递（我会考虑使用更好的名称作为操作名称而不是 id）：

export const id = (id) => {
  return {
    type: "ID",
    payload: id,
  };
};

然后使用带有此 ID 的 dispatch 调用 onclick 操作

const ChangeState = () => {
  const id = useSelector((state) => state.id); //initial state of id=0
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={()=>dispatch(id(1))}>button1</button>
      <button onClick={()=>dispatch(id(1))}>button2</button>
    </div>
  );
};

如何通过单击按钮从反应组件修改 redux 变量状态？

How to modify a redux variable state from react component with a button click?

javascript

reactjs

redux

react-redux