Реактивный родной Redux useDispatch не работает

Question

Я пытаюсь создать Redux и у меня возникает проблема, когда я пытаюсь сделать диспетчер не работает.

Файл действий, userActions. js:

export const setId = () => {
   console.log("Enter to set id func");
   return {
      type: 'SET_ID'
   }
}

Файл редуктора, userReducer. js:

const INITIAL_STATE = {
    id: "",
    email: "",
    name: "",
};

const userReducer = (state = INITIAL_STATE, action) => {
    console.log('Enter to userReducer');
    switch (action.type) {
        case "SET_ID": {
            // console.log(action.payload);
        }
        default: {
            return state;
        }
    }
}

export default userReducer;

Файл combReducers:

import userReducer from "./userReducer";
import { combineReducers } from "redux";

const allReducers = combineReducers({
    userReducer: userReducer
})

export default allReducers;

Приложение. js file:

import React from 'react';
import Routes from "./Routes";
import { createStore } from "redux";
import allReducer from "./app/reducers";
import { Provider } from "react-redux";

const store = createStore(
   allReducer
);

const App = () => {
 return (
    <Provider store={store}>
      <Routes />
    </Provider>
 );
};

export default App;

В файле экрана входа в систему у меня есть кнопка, когда я нажимаю на него, чтобы вызвать вызов действия "setId".
Вот часть моего кода из Login. js:

import { useDispatch } from 'react-redux';
import { setId } from '../actions/userActions';

handleLoginResult = (error, user) => {
        console.log('Enter to handleLoginResult');
        if (error !== "") {
            this.setState({ generalError: error });
        } else {
            const dispatch = useDispatch();
            console.log('uid: ', user.user.uid);
            dispatch(setId());
            alert("Login!");
        }
    }

В чем проблема и почему не вводится действие setId?

Answer 1

Вы можете попробовать вот так

const userReducer = (state = INITIAL_STATE, action) =>dispatch =>{
console.log('Enter to userReducer');
switch (action.type) {
    case "SET_ID": {
        // console.log(action.payload);
    }
    default: {
        return state;
    }
}

}

Answer 2

Крючки нельзя использовать внутри функции. Они должны быть объявлены непосредственно внутри функционального компонента.

Также не может использоваться ловушка useDispatch внутри компонента класса, вы должны использовать connect для компонента класса.

Предполагая, что у вас есть компонент класса, судя по в зависимости от того, как вы используете this.setState, вы написали бы свой код как

class Login extends React.Component {

   ...
   handleLoginResult = (error, user) => {
        console.log('Enter to handleLoginResult');
        if (error !== "") {
            this.setState({ generalError: error });
        } else {
            const dispatch = this.props;
            console.log('uid: ', user.user.uid);
            dispatch(setId());
            alert("Login!");
        }
    }
    ...

}


export default connect()(Login)

Если бы вы записали логин как функциональный компонент, вы бы написали его как

const Login = (props) => {
   const dispatch = useDispatch();
   const [state, setState] = useState({});
   ...
   const handleLoginResult = (error, user) => {
        console.log('Enter to handleLoginResult');
        if (error !== "") {
            setState({ generalError: error });
        } else {
            console.log('uid: ', user.user.uid);
            dispatch(setId());
        }
    }
    ...
}

Answer 3

Я не совсем понял ваш вопрос, но я дам вам пример моего действия

export const register_user = ({ name, email, password, password_confirmation }) => {
    return dispatch => {
        dispatch(
            {
                type: CREATE_USER
            }
        )
        let url = "/users"
        Axios.post(`${SERVER}${url}`, {
            "user": {
                "name": name,
                "email": email,
                "password": password,
                "password_confirmation": password_confirmation
            }
        })
        .then(() => {
            Alert.alert('Registrado com sucesso!')
            registerUserSuccess(dispatch)
        })
        .catch((err) => {
            registerUserError(err, dispatch)
        })
    }
}

const registerUserSuccess = (dispatch) => {
    dispatch(
        {
            type: CREATE_USER_SUCCESS
        }
    )
    this.props.navigation.navigate('Login')
}

const registerUserError = (err, dispatch) => {
    dispatch(
        {
            type: CREATE_USER_ERROR
        }
    )
    Alert.alert('Algo deu errado, verifique suas credenciais.')
}

Тип экспортируется из моего редуктора.

И Константа register_user импортируется и используется на моем экране регистрации.