Redux Thunk async/await fetch 在本机反应中不起作用答案

【问题标题】：Redux Thunk async/await fetch is not working in react nativeRedux Thunk async/await fetch 在本机反应中不起作用
【发布时间】：2021-07-19 19:03:51
【问题描述】：

您好，我正在尝试调用 API 来创建用户，但不幸的是，我能够这样做。有人能帮我一下吗？我正在从 signupScreen.js 文件中调用一个操作，并且在该操作中，我正在调度该函数，但不确定出了什么问题。这是一个例子。

singupScreen.js

import * as AuthActions from "../../../../store/actions/user/auth";
...
const submitCredentialHandler = useCallback(()=> {
    let newUser = {
        firstName: signupFormState.inputValues.fName,
        lastName: signupFormState.inputValues.lName,
        email: signupFormState.inputValues.email,
        password: signupFormState.inputValues.password,
        gender: signupFormState.inputValues.gender
    }
    AuthActions.register(newUser);
},[signupFormState]);

actions/auth.js

export const register = userRegisterData => {
    console.log('in action');
    console.log(userRegisterData); // Here it show data
    return async dispatch => { // Doesn't come under dispatch function.
        console.log('in action 2'); // This is't get printed. 
        try {
            console.log('in action 3');
            const response = await fetch(
                'https://xyz./rest/V1/customer/register',
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': "application/json"
                    },
                    body: JSON.stringify(userRegisterData)
                }
            );
            console.log(response);
            if (!response.ok) {
                throw new Error('Something went wrong');
            }
            
            const resData = await response.json();
    
            console.log(resData);
            await dispatch({ type: 'REGISTER', user: userRegisterData});
        } catch (error) {
            console.log('in action 5');
            console.log(error);
        }
    }
}

App.js

.
.
.

import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import AuthReducers from "./src/store/reducers/user/auth";

const App: () => Node = () => {
  
  const rootReducers = combineReducers({
    auth: AuthReducers,
    // cart: cartReducer
  });

  const store = createStore(rootReducers, applyMiddleware(ReduxThunk));
  
  return (
    <Provider store = { store }>
      <NavigationContainer>
        {/* <SafeAreaView style={backgroundStyle}> */}
          <StatusBar barStyle={'dark-content'} backgroundColor="white"/>
          <AppNavigationHandler />
        {/* </SafeAreaView> */}
      </NavigationContainer>
    </Provider>
  );
};

const styles = StyleSheet.create({
  
});

export default App;

我是新手，所以也许我错过了或做错了什么。请帮忙解决问题。

谢谢。

【问题讨论】：

标签： reactjs react-native react-redux react-hooks redux-thunk

【解决方案1】：

请试试这个：您需要像这样调度操作

import { useDispatch, useSelector } from 'react-redux';
...
  const dispatch = useDispatch();

  const submitCredentialHandler = useCallback(()=> {
    let newUser = {
      firstName: signupFormState.inputValues.fName,
      lastName: signupFormState.inputValues.lName,
      email: signupFormState.inputValues.email,
      password: signupFormState.inputValues.password,
      gender: signupFormState.inputValues.gender
    }
    dispatch(AuthActions.register(newUser));
  },[signupFormState]);
...

【讨论】：