React Native Redux 与 Redux Thunk 结合使用时保持不持久状态

Question

我正在构建一个 React Native 应用程序，我正在使用 Redux。Redux Persist工作正常，但是当我添加Redux Thunk时，存储的状态不是持久化的。state.test 变量的值确实更改为从 api 获取的值，但是当我重新启动应用程序时，该值再次等于初始值。我创建了一个简单的例子来重现这种行为。该示例由 5 个文件组成，我还创建了一个带有示例代码的 git 存储库 https://github.com/JenteBeerten/reduxPersistProblem

存储/操作/测试.js

export const SET_TEST = 'SET_TEST';
export const fetchTest = () => {
return async dispatch => {
fetch('http://dummy.restapiexample.com/api/v1/employee/1',{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}).then((response) => response.json())
.then((json) => {
dispatch({
type: SET_TEST, test: json.data.employee_name
});
})
.catch((error) => {
console.error(error);
});
}
};
export const setTest = (test) => {
return { type: SET_TEST, test: test };
};

存储/减速器/测试.js

import { SET_TEST } from "../actions/test";
const initialState = {
test: 'testInitialValue'
}
const testReducer = (state = initialState, action) => {
switch (action.type) {
case SET_TEST:
state.test = action.test;
return state;
default: 
return state;
}
}
export default testReducer;

存储/配置存储.js

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import AsyncStorage from '@react-native-community/async-storage';
import ReduxThunk from 'redux-thunk';
import testReducer from './reducers/test';
const rootReducer = combineReducers({
test: testReducer
});
const persistConfig = {
key: 'root',
storage: AsyncStorage
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
let store = createStore(
persistedReducer,
applyMiddleware(ReduxThunk)
);
let persistor = persistStore(store)
return { store, persistor }
}

应用.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import returnStoreAndPersistor from './store/configureStore';
import TestComponent from './TestComponent';
const {store, persistor} = returnStoreAndPersistor();
export default function App() {

return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<View style={styles.container}>
<TestComponent></TestComponent>
</View>
</PersistGate>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

测试组件.js

import React, { useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as testActions from './store/actions/test';
const TestComponent = props => {
const dispatch = useDispatch();
var test = useSelector(state => state.test.test);
console.log('test='+test);
useEffect(() => {
dispatch(testActions.fetchTest());
}, [dispatch]);
return (
<View style={styles.container}>
<Text> Test is {test} </Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});

export default TestComponent;

Answer 1

在reducer中，您必须返回先前状态的副本

import { SET_TEST } from "../actions/test";
const initialState = {
test: 'testInitialValue'
}
const testReducer = (state = initialState, action) => {
switch (action.type) {
case SET_TEST:
return {
...state,
test: action.test;
}
default: 
return state;
}
}
export default testReducer;

现在它将持续存在。

谢谢