1

我是 Rematch for Redux 的新手。我正在使用 Rematch 重做我的应用程序，但我不知道我是否正确执行了这些操作？如何/在哪里触发我的减速器和效果（Rematch Docs 中的第 3 步）？在屏幕之间切换时我看不到我的状态。状态似乎正在重置。有人可以帮我吗？我将不胜感激。

我跟着这个：https ://github.com/rematch/rematch

下面是我的代码：

我的应用程序会变得更大，因此我将它们放在不同的文件中以构建到 models.js 中。

商店/user.js

const user = {
    state: {},
    reducers: {
        login(payload) { return payload },
        email(state, payload) {
            return { ...state, payload }
        },
        password(state, payload) {
            return { ...state, payload }
        },
        username(state, payload) {
            return { ...state, payload }
        },
        fullname(state, payload) {
            return { ...state, payload }
        },
    }
}

export default user

存储/index.js

import { init } from '@rematch/core'
import user from './user'

const models = {
    user,
}

const store = init({
    models,
})

export default store

应用程序.js

import * as React from 'react';
import SwitchNavigator from './navigation/switchNavigator'
import { Provider } from 'react-redux'
import 'redux'
import store from './store/index'

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <SwitchNavigator/>
      </Provider>
    );
  }
}

导航/switchNavigator

import * as React from 'react';
import TabNavigatorScreen from './tabNavigator'
import AuthNavigatorScreen from './authNavigator'
import { createAppContainer } from 'react-navigation';
import { createSwitchNavigator } from 'react-navigation-switch-transitioner'

const switchNavigator = createSwitchNavigator(
  {
    Home: { 
      screen: TabNavigatorScreen
    },
    Auth: { 
      screen: AuthNavigatorScreen
    }
  },
  {
    initialRouteName: 'Auth',
  }
);

export default createAppContainer(switchNavigator);

导航/authNavigator

import * as React from 'react';
import LoginScreen from '../screens/login'
import SignUpScreen from '../screens/signup'
import MainScreen from '../screens/main'
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const authNavigator = createStackNavigator(
  {
    Main: {
      screen: MainScreen,
      navigationOptions: {
        header: null,
      }
    },
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        title: 'Login',
        headerTintColor: '#404040', 
        headerTitleStyle: {
          color: '#404040',
        },
        headerBackTitleStyle: {
          color: '#404040',
        },
        headerBackTitle: null,
      }
    },
    Signup: {
      screen: SignUpScreen,
      navigationOptions: {
        title: 'Sign Up',
        headerTintColor: '#404040',
        headerTitleStyle: {
          color: '#404040',
        },
        headerBackTitleStyle: {
          color: '#404040',
        },
        headerBackTitle: null,
      }
    }
  },
  {
    initialRouteName: 'Main',
  }
);

export default createAppContainer(authNavigator);

屏幕/注册

import * as React from 'react';
import {
    TextInput,
    Text,
    KeyboardAvoidingView,
    SafeAreaView,
    TouchableOpacity,
    Alert,
}
    from 'react-native';
import styles from '../styles'
import { connect } from 'react-redux';
import '@expo/vector-icons';
import 'redux';

class Signup extends React.Component {
    render() {
        const { routeName } = this.props.navigation.state
        return (
            <SafeAreaView style={styles.container}>
                <KeyboardAvoidingView behavior='position'>
                    <Text style={styles.mainText}>
                        EMAIL
                    </Text>
                    <TextInput
                        style={styles.inputText}
                        editable={routeName === 'Signup' ? true : false}
                        value={this.props.user.email}
                        onChangeText={input => this.props.email(input)}
                    />
                    <Text style={styles.mainText}>
                        PASSWORD
                    </Text>
                    <TextInput
                        style={styles.inputText}
                        editable={routeName === 'Signup' ? true : false}
                        value={this.props.user.password}
                        onChangeText={input => this.props.password(input)}
                        secureTextEntry={true}
                    />
                    <Text style={styles.mainText}>
                        USERNAME
                    </Text>
                    <TextInput
                        style={styles.inputText}
                        value={this.props.user.username}
                        onChangeText={input => this.props.username(input)}
                    />
                    <Text style={styles.mainText}>
                        FULL NAME
                    </Text>
                    <TextInput
                        style={styles.inputText}
                        value={this.props.user.fullname}
                        onChangeText={input => this.props.fullName(input)}
                    />
                    <TouchableOpacity
                        style={styles.buttonLighGray}
                        onPress={() => Alert.alert('Sign up')}>
                        <Text style={styles.buttonDarkText}>
                            Accept & Sign Up
                        </Text>
                    </TouchableOpacity>
                </KeyboardAvoidingView>
            </SafeAreaView>
        );
    }
}

const mapState = (state) => ({
    user: state.user,
})

const mapDispatch = ({ user: { email, password, username, fullname }}) => ({
    email: () => email(),
    password: () => password(),
    username: () => username(),
    fullname: () => fullname(),
})

export default connect(mapState, mapDispatch)(Signup)

登录屏幕使用与注册屏幕相同的状态。

4

1 回答 1

2

状态永远不会改变，因为您在调度操作时不传递任何参数。

const mapDispatch = dispatch => ({
  setEmail: mail => dispatch.user.email(mail)
})

每次在没有参数的情况下调用 reducer 之前调用函数。

关于你的复赛模型。你的 reducer 不应该只返回 ...state & payload。尝试

const user = {
    state: {},
    reducers: {
        email(state, email) {
            return { ...state, email }
        },
        password(state, password) {
            return { ...state, password }
        },
        username(state, username) {
            return { ...state, username }
        },
        fullname(state, fullname) {
            return { ...state, fullname }
        },
    }
}
于 2019-09-15T15:29:18.433 回答