Question

我创建了一个示例React Native应用程序，以查看是否可以使Redux-persist运行。但是，我的带有Redux Persist的React Native应用程序未将状态保存到持久存储中。

每次我将切换开关更改为“ true”，然后重新加载应用程序时，状态不会一直保持不变，并返回空值。

刷新应用程序时如何使“ True”保持不变。

这是我的代码：

index.js：

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import React, {Component} from 'react';
import { Provider } from "react-redux";
import { store, persistor } from "./Store/index";
import { PersistGate } from 'redux-persist/integration/react'
import App from './App.js';

class ReduxPersistTest extends Component {

render() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor} loading={null}>
      <App />
      </PersistGate>
    </Provider>
          );
        }
      }

AppRegistry.registerComponent('ReduxPersistTest', () => ReduxPersistTest);

store / index.js：

import { createStore, applyMiddleware, compose } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import toggle from "../Reducers/rootReducer.js";

import { AsyncStorage } from "react-native";
import {persistStore, persistReducer, persistCombineReducers} from "redux-persist";
import storage from 'redux-persist/lib/storage'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const togglePersistConfig = {
  key: 'toggle',
  storage: AsyncStorage
};

const middleware = [thunk];

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  debug: true,
  whitelist: ['toggle']
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const reducers = { toggle: persistReducer(togglePersistConfig, toggle) };
const persistedReducer = persistCombineReducers(persistConfig, reducers);


export const store = createStore(
  persistedReducer, composeEnhancers(applyMiddleware(...middleware))
);


export const persistor = persistStore(store);

Reducer.js

该问题可能在我的减速器中找到...

import { ADD_TOGGLE } from "../Constants/action-types";

import { combineReducers } from 'redux';


const initialState = {
  toggle: false,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TOGGLE:
    console.log(action.payload.toggle);
    console.log(action.payload);
    return {
      ...state, toggle: {
        toggle: action.payload.toggle,
    }};
    default:
      return state;
  }
};


export default rootReducer;

Actions / index.js

import { ADD_TOGGLE } from "../Constants/action-types";

export const addToggle = toggle => ({ type: ADD_TOGGLE, payload: toggle });

Constants / action-Types.js

export const ADD_TOGGLE = "ADD_TOGGLE";

我的组件：

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Copy from './Components/Copy/Copy.js';
import CopyToggle from './Components/Copy/CopyToggle.js';

/*
Redux imports
*/
import { connect } from "react-redux";
import { addToggle } from "./Actions/index";

/*
Redux constants
*/
const mapDispatchToProps = dispatch => {
  return {
    addToggle: toggle => dispatch(addToggle(toggle))
  };
};

//Styles
const styles = StyleSheet.create({
  textHeader: {
    textAlign: 'center',
    marginBottom: 10,
    marginTop: 100,
  },
});

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
          toggle: false,
        };
  }

  componentWillMount() {
    const { toggle } = this.state;
    this.props.addToggle({ toggle });
  }

render() {
  return (
    <View>
      <Text style={styles.textHeader}>Welcome to React Native!</Text>
      <Copy />
      <CopyToggle />
    </View>
        )
      }
    }

export default connect(null, mapDispatchToProps)(App);

Copy.JS（切换UI，将切换值从“ true”更改为“ false”

    import React, { Component } from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';

    import { compose } from 'react-compose';
    import { Switch } from 'react-native-switch';

    import { connect } from "react-redux";
    import { addToggle } from "../../Actions/index";

    const mapDispatchToProps = dispatch => {
      console.log('mapDispatchToProps hit');
      return {
        addToggle: toggle => dispatch(addToggle(toggle))
      };
    };


    class Copy extends Component {
      constructor(props) {
        super(props);

        this.state = {
          toggle: false,
        };

        this.addtoggle = this.addtoggle.bind(this);

      }

      addtoggle(val) {
        this.setState({
          toggle: val,
        }, function () {
          const { toggle } = this.state;
          this.props.addToggle({ toggle });
        });
      }


      render() {
        return (
            <View>
              <Text>Test redux persist</Text>
              <Switch
      value={ this.state.toggle }
      onValueChange={(val) => this.addtoggle(val)}
    />
            </View>
        );
      }
    }

    export default connect(null, mapDispatchToProps)(Copy);

CopyToggle.js（输出切换的布尔值）

import React, { Component } from 'react';

/*
Redux imports
*/
import { connect } from "react-redux";
import { addToggle } from "../../Actions/index";

/*
Native base and react native
*/
import { StyleSheet, View, Text } from 'react-native';

/*
Redux constants
*/
const mapDispatchToProps = dispatch => {
  return {
    addToggle: toggle => dispatch(addToggle(toggle))
  };
};

const mapStateToProps = state => {
  return { toggle: state.toggle.toggle };
};

// Custom Styles
const styles = StyleSheet.create({
  textHeader: {
    color: '#000',
  },
});


//class
class CopyToggle extends Component {
  constructor(props) {
    super(props);
      this.state = {
        purchase: false,
      };
this.toggleDisplay = this.toggleDisplay.bind(this);
  }

  componentWillMount() {
    const { toggle } = this.state;
    this.props.addToggle({ toggle });
  }

//display to output bollean value
  toggleDisplay() {
    let toggleState;
    if (this.props.toggle === false) {
      toggleState = 'false'
    }
    else if (this.props.toggle === true) {
      toggleState = 'true'
    }
    return (
      <Text>{toggleState}</Text>
    )
  }

//render
  render() {
    return (
      <View>
        {this.toggleDisplay()}
      </View>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CopyToggle);

非常感谢Redux知识渊博的人能够回顾并希望指出我的问题。

谢谢！

Answer 1

您必须添加要保留在存储对象中的值：

AsyncStorage.setItem('toggle': this.state.toggle)

Answer 2

如果您只想保留部分商店，则需要使用persistCombineReducers，所以我想出了类似的东西：

import { persistCombineReducers, persistReducer } from 'redux-persist';

import toggle from './Reducer.js';

const togglePersistConfig = { key: 'toggle', storage: AsyncStorage };

const reducers = { toggle: persistReducer(togglePersistConfig, toggle), // ...other reducers }

const persistConfig = { key: 'root', storage: AsyncStorage, debug: true, whitelist: ['toggle'] };

const persistedReducer = persistCombineReducers(persistConfig, reducers);

export const store = createStore( persistedReducer, composeEnhancers(applyMiddleware(...middleware)) );

React Native和Redux Persist不将状态保存到持久存储

2 个答案: