如何以正确的方式获取 createAsyncThunk Data React Native

Question

我是react native Redux 最新文档的新手。我想使用 createAsyncThunk 使用 Axios 获取我的 api 数据。

在我的代码下方：

App.js

import React, { useState } from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import ApiChartingSlice from './redux/slice/api/ApiChartingSlice';
import LoginNavigator from './navigation/LoginNavigator';



const store = configureStore({
  reducer: {    
    ApiChartingMenu: ApiChartingSlice
  }
});


export default function App() {
  return (        
    <Provider store={store}>
      <LoginNavigator />
    </Provider>
  );

}

ApiChartingAxios.js

import axios from "axios";
import { BasicAuthUsername, BasicAuthPassword } from "../utility/utility";
    
export default axios.create({
    baseURL: 'https://blablabla.id/index.php',
    headers: {
        auth: {
            username: BasicAuthUsername,
            password: BasicAuthPassword
          }
    }
});

亚ApiChartingAxios.js

import ApiChartingAxios from "../ApiChartingAxios";
    
export const SubApiChartingMenu = async () => {
    const response = await ApiChartingAxios.get('/ApiChartingMenu',{
        params: null
    });          
            
    return response;
};

ApiChartingSlice.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { SubApiChartingMenu } from '../../../api/subapi/SubApiChartingAxios';


export const ApiChartingMenuThunk = createAsyncThunk(
    'ApiChartingMenu',
    async () => {
        const response = await SubApiChartingMenu();
        console.log(response);
        return response.data.Data;        
    } 
)
  
  
// status: 'idle' | 'loading' | 'succeeded' | 'failed',
const ApiChartingMenuSlice = createSlice({
    name: 'ApiChartingMenu',
    initialState: {
        apiData: {},
        status: 'idle',
        error: null
    },
    reducers: {},
    extraReducers: {
        [ApiChartingMenuThunk.pending.type]: (state, action) => {
            state.playerList = {
                status: "loading",
                apiData: {},
                error: {},
            };
        },
        [ApiChartingMenuThunk.fulfilled.type]: (state, action) => {
            state.playerList = {
                status: "idle",
                apiData: action.payload,
                error: {},
            };
        },
        [ApiChartingMenuThunk.rejected.type]: (state, action) => {
            state.playerList = {
                status: "idle",
                apiData: {},
                error: action.payload,
            };
        },
    }
});


export default ApiChartingMenuSlice.reducer;

最后是我的屏幕输出：

ChartScreen.js

import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState, useCallback } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, KeyboardAvoidingView, TextInput, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { ApiChartingMenuSlice, ApiChartingMenuThunk } from '../../redux/slice/api/ApiChartingSlice';


const ChartScreen = () => { 
    console.log('ChartScreen');    
    const dispatch = useDispatch();
    console.log(dispatch(ApiChartingMenuThunk()));    
    
    const chartData = useSelector(state => state.ApiChartingMenu.apiData);    
    console.log(chartData);
    

    return (        
        <View>
            <Button title="test" onPress={() => {}} />
        <ChartComponent />
        </View>
    );
};


export default ChartScreen;

问题：我不知道为什么在我的 ChartScreen.js 这一行中：console.log(dispatch(ApiChartingMenuThunk()));

return :

Promise {
  "_U": 0,
  "_V": 0,
  "_W": null,
  "_X": null,
  "abort": [Function abort],
  "arg": undefined,
  "requestId": "oqhkA7eyL_VV_ea4FDxr3",
  "unwrap": [Function unwrap],
}

但是在ApiChartingSlice.js这一行console.log(response);

return 正确值。

那么，从我的 ChartScreen.js[=17= 中检索 createAsyncThunk 值的正确方法是什么？ ]

Api内容是列表菜单。

我想在第一次打开应用程序时执行 redux 并显示我所有的列表菜单。

但现在只是尝试 console.log ApiChartingMenuThunk 在 ApiChartingSlice.js 不是正在工作。

任何人都可以解决并指导我找到解决方案吗？谢谢

Answer 1

我自己弄明白问题出在这个文件上： ApiChartingSlice.js

这一行应该是：

[ApiChartingMenuThunk.fulfilled.type]: (state, action) => {
            state.playerList = {
                status: "idle",                
                apiData: state.apiData.push(action.payload),
                error: {},
            };

您还需要使用此代码发送：

在文件中 ChartScreen.js

这就是我们发送它的方式。

const toggleGetMenuHandler = useCallback(() => {        
        dispatch(ApiChartingMenuThunk())
        .unwrap()
        .then((originalPromiseResult) => {        
            // console.log(originalPromiseResult);        
        })
        .catch((rejectedValueOrSerializedError) => {        
            console.log(rejectedValueOrSerializedError);        
        })
    }, [dispatch]);    


    useEffect(() => {
      toggleGetMenuHandler();                
    }, [toggleGetMenuHandler]);
        },

现在这段代码：const chartData = useSelector(state => state.ApiChartingMenu.apiData);
将有一个正确的数据。

如何以正确的方式获取 createAsyncThunk Data React Native

How to Get createAsyncThunk In The Correct Way Data React Native

react-native

redux

redux-thunk

react-redux

redux-toolkit