How to change state with MUI Texfield & Redux

user_12506267 0
Viewed 135

I have an input field where I am trying to pass some information before moving onto a separate page. My problem is the Redux state is not changing, but the console is showing the value is being passed correctly. I'm assuming something is wrong with my Slice but I believe I am passing the payload correctly. My Redux slice looks like:

import { createSlice } from "@reduxjs/toolkit";

export const walletSlice = createSlice({
  name: "wallet",
  initialState: {
    wallet: "xxx-xxxx-xxx-xxxx",
  },
  reducers: {
    setWalletAddress: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { setWalletAddress } = walletSlice.actions;

export default walletSlice.reducer;

While my from component looks like:

import { setWalletAddress } from "../../redux/wallet";
import { useDispatch } from "react-redux";

export default function AddressForm() {
return (
  const dispatch = useDispatch();
  const handleChangeWallet = (event) => {
    dispatch(setWalletAddress (event.target.value));
    console.log(event.target.value);
  };
    <React.Fragment>
          <TextField
            onChange={handleChangeWallet}
            label="Wallet address"
          />
    </React.Fragment>
  );
}

My store looks pretty standard:

export default configureStore({
  reducer: {
    wallet: walletReducer,
  },
});
redux material-ui reactjs javascript
2 Answers

I assume that you need to use correct state field name in the reducer function. I guess following code line makes an issue,

state.value = action.payload;

Instead of this, you need to write correct field name wallet not value

state.wallet = action.payload;
user_110504700

You've mistyped value instead of wallet

setWalletAddress: (state, action) => {
      state.wallet = action.payload;
    },
user_114788580
Related