如何在 React Native 中保留存储值？

Question

在我的应用程序中，主页从我的其余部分获取 Json 响应 API.Then 我将产品添加到购物车 array.Initially，我的商店价值是..

const DEFAULT_STATE_TRENDING = {
data:{},
specialoffdata:[],
banner:[],
offerstitle:[],
cart:[],
cartcount:0,
isFetching:false,
dataFetched:false,
error:false,
}

添加产品后，购物车数组和购物车数量变为..

cart:[{...},{...}],
cartcount:cart.length

现在，我关闭 app.After 重新加载应用程序，购物车数组变为 empty.How 以在此处保留商店值？

Answer 1

保存存储值的最佳方法是使用这个很棒的库。 Redux Persist

包含persistance的各种methods和levels，简单易用。

Installation 和 basic usage 在他们的 github docs.

中有详细记录

Answer 2

最简单的方法是使用 AsyncStorage

let response = await AsyncStorage.getItem('count'); //Read
AsyncStorage.setItem('count', this.state.count + '');

这样，您就可以在每个组件中访问 'count'。

最现代的方法是使用 React 的新上下文 api，您定义上下文提供程序并在任何地方使用它：

const ThemeContext = React.createContext('light')

class ThemeProvider extends React.Component {
  state = {theme: 'light'}
  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}> //<--- 'light' is exposed here
        {this.props.children}
      </ThemeContext.Provider>
    )
  }
}
class App extends React.Component {
  render() {
    return (
      <ThemeProvider>
        <ThemeContext.Consumer>
          {item => <div>{item}</div>} //<-- you consume the value ('light') here
        </ThemeContext.Consumer>
      </ThemeProvider>
    )
  }
}

无论哪种方式，它都比 Redux 或 MobX 更轻、更容易。

Answer 3

我使用 AsyncStorage.In 这样即使在重新加载、关闭和打开应用程序后我仍然保留我的商店状态值。

configureStore.js:

import {createStore, applyMiddleware,compose} from 'redux';
import thunk from 'redux-thunk';
import { autoRehydrate } from 'redux-persist';
import allReducers from './reducers';
import { AsyncStorage } from 'react-native';

const middleware = [ thunk,
                   ];

export default function configureStore() {
let store= createStore(
    allReducers,
    {},
    compose(applyMiddleware(...middleware),autoRehydrate())
    );
    console.log("Created store is"+store);debugger
    return store;
    }

App.js:

const store = configureStore();
export default class App extends Component {
componentDidMount() {
console.log("App.js started and its store value is"+store);debugger
SplashScreen.hide()
persistStore(
  store,
  {
    storage : AsyncStorage,
    whitelist : ['trending']
  }
);
}
render() {
return (
  <Provider store={store}>
  <MyStack/>
  </Provider>
);
}
}

如何在 React Native 中保留存储值？

How to persist the store values in react native?

react-native

redux

redux-persist