进行API调用后，React Native/Redux State未更新

Question

我可以从Redux State返回值，当我调用API时，我会看到这些值被注销，但状态没有更新。我设置了一个带有Redux商店的基本应用程序来证明这一点。我还包含了Thunk库，我读到它是异步状态操作(如API(所必需的。我的猜测是，我没有在reducer的末尾正确返回状态，因为同样，如果我记录这些值，就会返回详细信息。

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

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;

我的根还原剂(可能在商店里(：

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

您可以在Action creator中调用它，而不是在reducer中调用您的API，然后用有效负载作为响应来调度您的操作。根据调度操作类型，您可以通过reducer返回更新后的状态以存储。

组件调度操作->应用你的thunk(api调用(->使用API响应数据调度动作->reducer根据操作类型使用正确的状态更新存储。

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