在进行 API 调用后反应 Native/Redux 状态未更新

Question

我可以 return 来自 Redux 状态的值，当我进行 API 调用时，我看到那些被注销但状态没有更新。我设置了一个带有 Redux Store 的基本应用程序来证明这一点。我还包含了 Thunk 库，我读到它是异步状态操作（如 API）所必需的。我的猜测是我没有 return 在 reducer 的末尾正确地设置状态，因为再次，如果我记录这些值，就会有细节被 returned.

为了尽可能地整合代码，我只包含 必要的 部分：

export default function App() {

  const OtherVal =  useSelector((state) => state.reducer2.WorkoutDetails);
  
  const dispatch = useDispatch();

  React.useEffect (() =>{
      dispatch({   type: 'Test_API' })
  })

  return (

   
<View style={styles.container}>
  <Text>Open up App.js to start rking on your app!</Text>
   
 <Text>Value is: {OtherVal}</Text>
  <StatusBar style="auto" />
</View>

  );
}

我的商店：

import {createStore, applyMiddleware } from 'redux';
import rootReducer from './index';
import thunk from 'redux-thunk'

const store = createStore(rootReducer, applyMiddleware(thunk) );


export default store;

我的 Root Reducer（可能在商店中）：

import { combineReducers } from 'redux'
import reducer2 from './FirstReducer'


export default combineReducers({
  reducer2,
})

我的减速器：

import axios from 'axios';

const initialState = {
    WorkoutDetails:null,
}

const reducer2 =  (state = initialState, action) => {

    if(action.type == 'Test_API'){
            axios.post('https://xxxx',{},
        {
            headers:{
            'X-Requested-With':'XMLHttpRequest'  
            , 'Content-Type': 'application/json',
            }  
        }
        ).then(function (response) {
            // handle success
            console.log('API Call 2')
            const val = JSON.parse(response.data.recordset[0].EndPoint)
            console.log('JSON Val', val)
            return {...state,WorkoutDetails: val}
        })
    }

    console.log('default Red',state) 
    return state     
}
export default reducer2;

Answer 1

无需在 reducer 中调用 API，您可以在 Action creator 中调用它，然后使用负载作为响应发送您的操作。根据调度操作类型，您可以 return 通过 reducer 存储更新后的状态。

组件分派一个动作 -> 应用你的 thunk（api 调用）->用 API 响应数据分派一个动作 ->reducer 根据动作类型用正确的状态更新存储。

请参考以下内容URL： https://www.freecodecamp.org/news/redux-thunk-explained-with-examples/

在进行 API 调用后反应 Native/Redux 状态未更新

React Native/Redux State not updating after making API Call

react-native

react-redux