1

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

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

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

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

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

4

3 回答 3

5

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

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

Installation并且basic usage在他们的github 文档中有很好的记录。

于 2018-03-21T06:11:36.200 回答
1

最简单的方法是使用 AsyncStorage

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

这样，您可以访问每个组件中的“计数”。

最现代的方法是使用 react 的新 context api，你定义 context 提供者并在任何地方使用它：

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 更轻、更容易。

于 2018-03-21T09:32:18.837 回答
0

我使用了 AsyncStorage。以这种方式，即使在重新加载、关闭和打开应用程序之后，我也能保留我的商店状态值。

配置商店.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;
    }

应用程序.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>
);
}
}
于 2018-03-26T09:45:06.687 回答