简体   繁体   中英

React Redux - Dynamically dispatch function name

I am currently working on a project in React Native where I use react-redux.

Now I have the situation in which I would like to call the dispatch hook with a dynamic input. However it just do not work but I get no error message in the console.

Some remarks:

  • the user Object contains the key value pairs I want to add to the state (eg name: John Doe)
  • I tried multiple versions of asigning the function name to the dispatch hook but all failed

Can anyone tell me, what I am doing wrong?

My current Code:

import {
  resetCompleteStoreState,
  setAdressCity,
  setAdressZipcode,
  setEmail,
  setName,
  setPhone,
} from "../../../app/redux/features/auth/userSlice";

... more Code ... 

  var functions = new Map();
  [setAdressCity, setAdressZipcode, setEmail, setName, setPhone].forEach(
    (fn) => {
      functions.set("" + fn, fn);
    }
  );

      for (let [key, value] of Object.entries(response.data.data.user)) {
        if (key.includes("_")) {
          var i,
            frags = key.split("_");
          for (i = 0; i < frags.length; i++) {
            frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
          }
          key = frags.join("");
        } else {
          key = key.charAt(0).toUpperCase() + key.slice(1);
        }
        if (key != "Id") {
          stateMethod = functions.get("user/set" + key);
          dispatch(stateMethod(value));        
        }
      }

you can't call a function from a string unless you store them in some object that do the translation

like this

import {
  resetCompleteStoreState,
  setAdressCity,
  setAdressZipcode,
  setEmail,
  setName,
  setPhone,
} from "../../../app/redux/features/auth/userSlice";

... more Code ... 
    const functions = new Map()
    [ setAdressCity,
  setAdressZipcode,
  setEmail,
  setName,
  setPhone].forEach(fn => {
    functions.set(fn.name, fn)
  })
      for (let [key, value] of Object.entries(response.data.data.user)) {
        if (key.includes("_")) {
          var i,
            frags = key.split("_");
          for (i = 0; i < frags.length; i++) {
            frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
          }
          key = frags.join("");
        } else {
          key = key.charAt(0).toUpperCase() + key.slice(1);
        }
        if (key != "Id") {
          //  dispatch("user/set" + `${key}` + `(${value})`);
          //  dispatch(`set${key}`(`${value}`));
            test = functions["set" + key];
            console.log(test);
           dispatch(test(`${value}`));           
        }
      }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM