Question

我正在使用redux和redux-persist在Android的React Native中制作一个应用程序。我想使用redux将每个用户的ID存储在我的应用程序中，这样他们回来时就无需再次登录。我制作了一个名为handleUser的简化器，该简化器允许用户登录。它在没有redux-persist的情况下可以完美运行，但是当我使用它时，调用我的reducer时不会更新存储。我不知道iOS上是否一样。

我已经尝试过：$rm -rf node_modules && $npm install，并且还向我的rootPersistConfig中添加了keyPrefix: ''，我在多个询问中都找到了这种解决方案，但是它不起作用。请注意，即使我认为它可能与此无关，我也使用了反应导航。

这是我的configureStore：

import { createStore } from 'redux'
import handleUser from './Reducers/userReducer'


import { persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const rootPersistConfig = {
    key: 'root',
    storage: storage,
    keyPrefix: ''
}

export default createStore(persistCombineReducers(rootPersistConfig, { handleUser } ))

这是我的减速器：

const initialState = { ID: '' }

function handleUser(state = initialState, action) {
    let nextState
    console.log(action) //I added this debugger but the behaviour is expected, no error.
    switch(action.type) {
        case 'SIGN_IN':
            nextState = {
                ...state,
                ID: action.value.ID
            }
            return nextState || state

        default:
            return state
    }
}

export default handleUser

这是允许登录的组件：

import React from 'react'
import { StyleSheet, View, Button } from 'react-native'
import { connect } from 'react-redux'

class SignIn extends React.Component {

    _signIn() {
        const action = { type: 'SIGN_IN', value: { ID: 'my_id' } }
        this.props.dispatch(action)
        console.log(this.props) //shows ID as undefined when using redux-persist
    }

    render() {
        return (
            <View style={styles.mainContainer}>
                <Button
                    title='Sign in'
                    onPress={ () => this._signIn() }
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        alignItems: 'center'
    }
})

const mapStateToProps = state => {
    return {
        ID: state.ID
    }
}

export default connect(mapStateToProps)(SignIn)

我希望当我在SignIn组件中显示this.props时，在调用reducer之后，我会找到值my_id。问题是它保持未定义状态。控制台不会显示任何错误。

Answer 1

我会检查几件事。

记录持久性存储，以查看是否正在存储。在RND控制台中键入showAsyncStorageContentInDev（）。或使用以下命令登录：

AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (error, stores) => {
    stores.map((result, i, store) => {
      console.log('log async: ',{ [store[i][0]]: store[i][1] });
      return true;
    });
  });
});

显然，您需要将以上代码放置在代码中可以存储信息的位置。

确保您使用的是redux-persist提供的PersistGate。

import { PersistGate } from 'redux-persist/integration/react'

// ... normal setup, create store and persistor, import components etc.

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

如文档中所述。 https://github.com/rt2zz/redux-persist

Answer 2

问题已解决！该ID存放得很好，但我看不懂。感谢Aluminium22，他给了我更好的阅读商店的方法。我创建了一个名为GetStore.js的新文件，该文件具有在需要我的ID时使用的功能：

import AsyncStorage from '@react-native-community/async-storage'

export default function getStore(callback) {
    return AsyncStorage.getAllKeys((err, keys) => {
        return AsyncStorage.multiGet(keys, (error, stores) => {

            const store = stores[1]
            let parsedStore = JSON.parse(JSON.parse(store[1]).handleUser) //handleUser is my reducer

            callback(parsedStore)
        })
    })
}

所以当我想阅读商店时，我会这样做：

import GetStore from 'your GetStore.js file path'

//...

GetStore( store => {
    console.log(store)
})

为什么redux-persist不保留我的数据？

2 个答案: