How I can pass the state and action to Redux in functional component?

Question

I'm tried to use React Hooks form and pass the values to the state from the Redux store through my setLog() action, and as I understand my action doesn't work but not getting through any type of error. So, I don't know what exactly is going wrong. Also, I use redux-saga, but for now, I don't use it, I just declared it, it could be the issue or not?

SignUp.js file

import React from "react";
import { useForm } from "react-hook-form";
import { connect } from "react-redux";

import { setLog } from "../actions";

 function SignUp({ info }) {

 const { register, handleSubmit, setValue } = useForm();

 const onSubmit = data => setLog(data);

return (
  <React.Fragment>
    <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("login")} />
        <input {...register("password")} />
        <input type="submit" />
    </form>
    {/* <h1>{info}</h1> */}
  </React.Fragment>

);
}

const mapStateToProps = (state) => {
return {
    info: state.signUp
};
}


export default connect(mapStateToProps, { setLog })(SignUp);

Actions:

 export const setLog = (data) => {
return {
    type: 'SET_LOG',
    payload: data
};
}

SignUp reducer

export default(state=[],action) => {
switch(action.type){
    case 'SET_LOG':
        return [...state, ...action.payload];
    default:
        return state;
}
}

My store:

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootSaga from '../sagas';

import rootReducer from '../reducers';

const configureStore = () => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__
        ? compose(
              applyMiddleware(sagaMiddleware),
              window.__REDUX_DEVTOOLS_EXTENSION__(),
          )
        : applyMiddleware(sagaMiddleware),
);
sagaMiddleware.run(rootSaga);
return store;
};

 export default configureStore;

Answer 1

What is happening is that you're not calling the setLog from the props, you're just calling the function without tying it with redux, you need to attach the function using the mapDispatchToProps function and calling the dispatch inside that function like this:

const mapDispatchToProps = (dispatch) => {
  return {
    // Calling it submitLog to avoid name collisions with the imported setLog
    submitLog: (data) => dispatch(setLog(data)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignUp);

The code above is connecting the action to redux, now you just need to call it as a prop like this:

// Now you will have the submitLog as a prop and it will be tie to redux.
function SignUp({ info, submitLog }) {

 const { register, handleSubmit, setValue } = useForm();

 const onSubmit = data => submitLog(data);

 // Rest of the code
}