Return 在 REDUX Reducer React Native 中承诺 { "_U": 0, "_V": 0, "_W": null, "_X": null, }

Question

这是我使用 REDUX 的代码：

ApiChartingReducer.js

    const ApiChartingMenuInitial = {
        apiData: []
    };
    
    export const ApiChartingMenuReducer = (state = ApiChartingMenuInitial, action) => {      
        switch (action.type) {
            case GET_MENU_CHART:                    
                 const getData = async () => {                             
                    try {
                        const response = await ApiChartingAxios.get('/ApiChartingMenu',{
                            params: null
                        });          
                        console.log(response.data.Data) // Data Exists
                        return response.data.Data;
                    } catch (error) {
                        console.log(error);
                    }                
                    return response.data.Data;                
                };    
                            
                console.log(getData());  // data not exists            
                // return {...state, apiData: getData()}
                
            default: 
                return state;
        }    
    };

在这一行中：

console.log(response.data.Data) // Data Exists

但在这一行中：

console.log(getData()); // Data not exists

和return：

    Promise {
      "_U": 0,
      "_V": 0,
      "_W": null,
      "_X": null,
    }

我无法在我的 redux reducer 文件中使用 useState。那么如何在 getData() 中获取我的响应数据？

Answer 1

在 Redux reducer 中，不允许执行任何异步代码。

Redux reducer 必须是没有副作用的纯函数。

通常在 Redux 中，您会在 Redux 之外或在像 thunk 这样的中间件中进行抓取，然后使用加载的数据分派一个动作，然后在 reducer 中进行处理。

总的来说：你在这里写的是一种非常过时的 Redux 风格。自 2019 年以来，推荐的 Redux 风格不使用 switch..case reducers，ACTION_TYPES，immutable reducer logic，createStore 或 connect/mapStateToProps。您很可能正在关注过时的文档。新样式只有代码的1/4，少了很多error-prone.

我建议您遵循 the official Redux "Essentials" tutorial，它将教您新的风格，并在第 5、7 和 8 章中介绍不同的数据获取方法。

如果你坚持要继续学习这种旧的 Redux 风格，你也可以看看 Redux Fundamentals 教程，它展示了旧的风格来解释 Redux 的一些内部结构，对于那些正在学习的人对此感兴趣。第 6 章是关于数据获取的。

Return 在 REDUX Reducer React Native 中承诺 { "_U": 0, "_V": 0, "_W": null, "_X": null, }

Return Promise { "_U": 0, "_V": 0, "_W": null, "_X": null, } in REDUX Reducer React Native

reactjs

react-native

redux

redux-thunk

react-redux