Error: Actions must be plain objects. Use custom middleware for async actions?

Question

React

action:

export const signIn = valid => {
    return {
        type: 'SIGN_IN',
        payload: valid
    }
}

reducer:

const loggedReducer = (state=false, action) => {
    switch(action.type) {
        case 'SIGN_IN':
            return !state;
        default:
            return state;
    }
}

export default loggedReducer;

How I work with them:

const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const dispatch = useDispatch();

localStorage.setItem('user', JSON.stringify(dispatch(signIn(false)).payload));

function login(event) {
        event.preventDefault();

        if (username === 'Admin') {
            if (password === '12345') {
                localStorage['user'] = dispatch(signIn(true).payload);
            }   
        } else {
            localStorage['user'] = dispatch(signIn(false).payload);
            alert('Имя пользователя или пароль введены не верно');
        }
    }

Answer 1

You need to add JSON.stringify()
and take payload from dispatch

localStorage['user'] = JSON.stringify(dispatch(signIn(true)).payload);