Estoy trabajando en el proyecto react-redux desde hace bastante tiempo. En redux tengo una variable de identificación con estado inicial de 0 . Quiero que este valor se cambie al hacer clic en el botón. Para que esto suceda, tengo dos botones, button1 y button2 . cuando hago clic en el botón 1, quería cambiar el estado de identificación a 1 y 2 cuando hago clic en el botón 2 .
Aquí está mi código.
idReducer.js
const processReducer = (state = 0, action) => { switch (action.type) { case "ID": return state; default: return state; } }; export { processReducer };acción.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 });Componentes ChangeState.js con dos botones para cambiar el estado de 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;Problema: cuando se hace clic en el botón 1, quiero cambiar el estado de identificación a 1 y 2 cuando se hace clic en el botón 2.
Gracias.
Debe modificar su reductor para hacer algo con paylad:
const processReducer = (state = 0, action) => { switch (action.type) { case "ID": return action.payload; default: return state; } }; export { processReducer }; haga que su acción pase la identificación como carga útil (consideraría usar algo mejor como nombre de acción en lugar de id ):
export const id = (id) => { return { type: "ID", payload: id, }; };y luego llame a su acción al hacer clic usando el despacho con esta ID
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> ); };