Question

在我的应用程序中，主页从我的其余API中获取Json响应。然后我将产品添加到购物车数组中。最初，我的商店值为..

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

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

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

现在，我关闭了我的应用程序。重新加载应用程序后，购物车数组变空。如何在此处保留商店值？

Answer 1

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

它包含各种methods和levels persistance，易于使用。

Installation和basic usage已在github docs上详细记录。

Answer 2

最简单的方法是使用AsyncStorage

let response = await AsyncStorage.getItem('count'); //Read
AsyncStorage.setItem('count', this.state.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。这样，即使重新加载，关闭和打开应用程序，我仍然保留了我的商店状态值。

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>
);
}
}

如何坚持商店价值反应原生？

3 个答案: