2

I learn JavaScript and React Redux and have this question:.

Let's say I have this Redux dispatch:

dispatch(setLogMessage( () =>{"Connecting to env1", 12340, "connecting"}));

and the reducer is here for the above setLogMessage is this:

   const initialState = {
     log: "",
   };

    case booksActionTypes.LOG_MESSAGE: {
      return {
        ...state,
        log: action.payload,
      };
    }

And in the mapStateToProps it looks like this:

  const [theLog, addLog] = useState([]);

      useEffect(() => {
        if (props.log !== "") {
          addLog([...theLog, createData(props.log)]);
        }
      }, [props.log]);
    
      function createData(message, timestamp, type) {
        console.log('s');
        return { message, timestamp, type };
      }

The problem is I play around and wanted to learn the arrow functions in this context and wanted to have the above props.log, to be a function to resolve the above () =>{"Connecting to env1", 12340, "connecting"}) and pass it to function createData(... Hope you understand my question!

Kid
  • 1,869
  • 3
  • 19
  • 48
  • Can you add the actual `setLogMessage` action creator? – Benjamin Gruenbaum Apr 09 '21 at 17:59
  • `() =>{"Connecting to env1", 12340, "connecting"}` are you expecting this to return an object?? – Brian Thompson Apr 09 '21 at 18:00
  • Also, what midleware are you using? – Benjamin Gruenbaum Apr 09 '21 at 18:04
  • @BrianThompson It looks like this `export const setLogMessage = (log) => ({ type: booksActionTypes.LOG_MESSAGE, payload: log, });` – Kid Apr 09 '21 at 18:04
  • @BenjaminGruenbaum I don't add any middleware in this setup Redux, like Saga or else – Kid Apr 09 '21 at 18:05
  • What is the current behavior? Where is it not doing what you expect? – Brian Thompson Apr 09 '21 at 18:06
  • @BrianThompson Thanks, it looks like this putting a [breakpoint](https://snipboard.io/LEmc2f.jpg) . The `createData(message, timestamp, type)` is called ok but the, `message` attribute is the only one populated with function from the dispatche . ` timestamp, type` is `undefined` – Kid Apr 09 '21 at 18:08
  • 1
    Ok, so you have two problems. You are not calling `props.log`, only passing it as a reference. Problem two is that your function passed to `setLogMessage` does not return anything. – Brian Thompson Apr 09 '21 at 18:13
  • @BrianThompson feels like your on to something – Kid Apr 09 '21 at 18:14

1 Answers1

5

Immediately returning objects from arrow functions can be syntactically confusing...

The { appears to be opening a new object, but in reality it is opening up a function body.

To resolve this, wrap the object in parenthesis (notice the object property names as well):

() => ({ message: "Connecting to env1", timestamp: 12340, type: "connecting"})

The second problem is that you are never calling this function.

props.log holds that function reference, so to get its values as parameters to createData you need to call it (and pass the individual values).

const values = props.log();
createData(values.message, values.timestamp, values.type);

Summary

  1. Implicit returns require wrapping parenthesis when returning an object.
  2. Objects must contain a property name, not just a value (that's what arrays are for)
  3. Functions must be called, not just passed as props.
Brian Thompson
  • 13,263
  • 4
  • 23
  • 43