Блог

У меня есть реквизит, который является частью основного приложения. Я попытался передать его в качестве параметра отправки, но reactjs/toolkit пожаловался на это A non-serializable value was detected in the state .

(Я думаю, потому что prop-это экземпляр класса).

Как я могу использовать эту опору внутри саги?

Для визуализации это то, что мне нужно использовать:

Мне нужно иметь возможность использовать ту ual опору , которая находится внутри App , когда пользователь нажимает кнопку где-то в Header .

rootStore.js (не весь код)

 const setupStore = () => {
  const store = configureStore({
      reducer,
      middleware,
  });
  startSaga();
  return store;
};

export default setupStore;
 

rootSaga.js

 import { all,fork } from 'redux-saga/effects';
import createSagaMiddleware from 'redux-saga';

import userSaga from './userSaga';

function* rootSaga() {
    console.log("hi saga")
    yield all([
        fork(userSaga),
    ]);
}

const sagaMiddleware = createSagaMiddleware();

export const startSaga = () => {
    sagaMiddleware.run(rootSaga);
  };
  
export default sagaMiddleware;
 

userSaga.js

 export function* handleUserLogin() {
    console.log('saga handleUserLogin')
    // <=== need to use `ual` here
}

export default function* watchUserLogin() {
    yield takeEvery(fetchLoginRequest.type, handleUserLogin);
}
 

Header.js (соответствующие части):

 import { fetchLoginRequest } from '../reducers/userReducer';
const Header = (props) => {
    const {
        fetchLoginRequest,
      } = props;

    const handleLogin = () => {
        fetchLoginRequest()
    }
}

const mapDispatchToProps = {
    fetchLoginRequest,
};
export default connect(mapStateToProps,mapDispatchToProps)(Header);
  

 

Сага работает, я вижу saga handleUserLogin консоль devtools