Question

我正在学习redux在我的react-native android应用程序中实现。我认为在应用程序中维护状态会有所帮助。

例如，如果用户已登录，则有助于将用户状态保存为记录为true kinda。我希望我采取正确的榜样。我看到react-native还有AsyncStorage，无论用户是否已登录，我们都可以将其保存。

如果用户已记录，我们可以编写逻辑，然后在AsyncStorage中将记录设置为true，在注销时设置为false。现在，检查启动屏幕是否为真或假，然后相应地导航。

如果可以使用AsyncStorage管理此状态，那么现在有点混乱那么redux应用程序中react-native的用例是什么。有人可以通过举个例子来解释吗？

Answer 1

AsyncStorage适用于本地反应原文localStorage适用于浏览器，但它是异步的。

我假设您使用JWT进行身份验证，您可以使用AsyncStorage来存储令牌。

// on login 
AsyncStorage.setItem('@token', value)

在应用程序的输入屏幕中，您可以从AsyncStorage获取令牌，并根据令牌的解码值，您可以更新商店并进行重定向。

// componentWillMount
AsyncStorage.getItem('@token')
  .then(token => {

    const decodedToken = decodeToken(token)

    if (isExpired(decodeToken)) // redirect to login

    // save the values to the store
    someAction(decodedToken)

  })

无论如何，如果你在应用程序中使用redux，无论框架如何，与应用程序状态相关的所有内容都应由redux处理。

总之，您应AsyncStorage存储令牌，但不应注明isConnected, isLoggedIn, user ...

Answer 2

在AsyncStorage中存储凭据（或重要/重要信息）并不十分安全。如果你知道在哪里可以访问它：）

我也在研究react-native应用程序。我将加密的令牌存储在AsyncStorage中。当用户登录时，我获得该令牌并调用服务器（登录api）并获得accessToken（验证由服务器负责）。我需要在所有API调用中传递此accessToken。我使用axios和apollo的组合，因此我在登录后将此accessToken存储在我的redux商店中并从那里读取。

我还在几个地方使用redux： -

在少数地方打开/关闭键盘
如果令牌已过期，则重定向到登录页面

希望它有所帮助：）

Answer 3

我相信Redux（以及所有其他框架）在团队开发时具有价值，因为开发人员可以对他们正在开发的产品进行通用设计，从而大大缩短了新同事的入职时间。

对于技术部分，如果代码库很小，我不推荐Redux，因为它只会让你头疼，最后你会想知道为什么甚至需要这些样板。

另一方面，当产品不断增长时，Redux允许您以较低的复杂度扩展代码库。

Answer 4

不要自己处理AsyncStorage，请查看redux-persist。这样你就可以按原样处理redux状态，而redux-persit将为你处理来自AsyncStorage的令牌存储和检索。

Answer 5

我建议您在应用程序中执行以下3个步骤，它将使用AsyncStorage自动加载并保存您的状态，您将能够在任何所需的组件上访问它。

1）设置redux-persist自动加载/保存状态

import { Provider } from 'react-redux';
import { persistStore, autoRehydrate } from 'redux-persist'; 

import { yourReducers } from './reducers'; 

const store = compose(
   autoRehydrate()
)(createStore)(yourReducers);

2）在主/索引组件上设置存储方法到AsyncStorage并在呈现应用程序之前等待加载状态

export default class index extends Component { 
    constructor(props) {
        super(props);
        this.state = { rehydrated: false };
    }

    componentWillMount() {
        persistStore(store, {storage: AsyncStorage}, () => {
        this.setState({rehydrated: true});
        });
    }

   render() { 
    if(!this.state.rehydrated)
        return <View />;
    else
        return (
            <Provider store={store}>
               <YourLoginScreen-or-Router />
            </Provider>
        );}
}

3）如果状态包含用户，这允许您的LoginScreen访问状态并将您的用户发送到下一个屏幕，我建议使用路由器来执行此操作

import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';

class LoginScreen extends Component {
    ...

    componentWillMount() {
        if (this.props.user !== null)
            Actions.ShowScreenWhereUserIsLoggedIn(); //If you dont use react-native-router-flux change to your navigator
    }

    render() {
        ....        
    }
}

const mapStateToProps = ({ auth }) => {
    const { user } = auth;

    return { user };
};

export default connect(
    mapStateToProps,{}
)(LoginScreen);

auth是您的登录/会话缩减器，它将在您登录时保存user并调用路由器/导航器切换屏幕

您可以在此处详细了解redux：http://redux.js.org/docs/basics/

Redux用例用于响应本机应用程序

5 个答案: