Блог

Я пытаюсь использовать форму крючков реакции и передавать значения в состояние из хранилища Redux через действие setLog (), и, как я понимаю, мое действие не работает, но не проходит через какие-либо ошибки. Итак, я не знаю, что именно происходит не так. Кроме того, я использую redux-saga, но пока я им не пользуюсь, я просто объявил об этом, это может быть проблемой или нет?

SignUp.js файл

 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);
 

Действия:

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

Редуктор регистрации

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

Мой магазин:

 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;
 

Что происходит, так это то, что вы не вызываете setLog из реквизитов, вы просто вызываете функцию, не связывая ее с redux, вам нужно прикрепить функцию с помощью функции mapDispatchToProps и вызвать отправку внутри этой функции следующим образом:

 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);
 

Приведенный выше код соединяет действие с redux, теперь вам просто нужно вызвать его как опору, как это:

 // 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
}