Question

当我开始在React本机应用程序中使用Redux sagas配置时，出现以下问题：

App.js：

import React from 'react';
import AppNavigator from './config/AppNavigator'
import { Provider as PaperProvider } from 'react-native-paper';
import * as Font from 'expo-font'

import { createStore } from 'redux'
import { Provider as ReduxProvider} from 'react-redux'

import InitialReducer from './reducer/Initial-reducer'

const store = createStore(InitialReducer)

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'RobotoBlack': require('./assets/fonts/Roboto/Roboto-Black.ttf'),
      'RobotoBold': require('./assets/fonts/Roboto/Roboto-Bold.ttf'),
      'RobotoRegular': require('./assets/fonts/Roboto/Roboto-Regular.ttf'),
    });
  }
  render() {
    return (
      <ReduxProvider store={store}>
        <PaperProvider>
          <AppNavigator />
        </PaperProvider>
      </ReduxProvider>
    );
  }
}

AppNavigator.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './../pages/Home';
import InitialDetails from '../pages/LandingPage/initialDetails';

const AppNavigator = createStackNavigator({
    Home: { 
      screen: Home,
      navigationOptions: {
        header: null,
      }
    },
    InitialDetails: { 
      screen: InitialDetails,
    }
  },
    {
      initialRouteName: 'Home',
    });

export default createAppContainer(AppNavigator);

动作

export const  USER_INITIAL_INPUT = 'USER_INITIAL_INPUT'

export function updateUserInitialInput (action){
    return{
        type:USER_INITIAL_INPUT,
        action
    }
}

减速器：

import USER_INITIAL_INPUT from './../action/Initial-action'

const initialState = {
    userInitalInputFromUser :{
        animal : 'tige'
    }
}

const InitialReducer = (state = initialState,action) => {
    switch(action.type){
        case 'USER_INITIAL_INPUT':
            return{
                ...state,
                userInitalInputFromUser : action.action
            }
        default:
            return state
    }
}

export default  InitialReducer

连接Redux的页面。

import React from 'react';
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import {
  View,
  Text,
  ScrollView,
  Image,
  StatusBar,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import {Button } from 'react-native-paper';
// actions
import updateUserInitialInput from './../../action/Initial-action'
import { CommonCSS, initialPageCSS } from '../../Style'

class InitialDetails extends React.Component {

  constructor(props) {
    super(props)
    this.state = { 
      cookingSkill: 'Beginner',
      isVegeterian:false
    }
  }

  static navigationOptions = {
    title: "Personalization",
    headerStyle: {
      backgroundColor: "#fa7776"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };

  userInitalInput(whichState,value){
      whichState ==='cookingSkill' ? 
      this.setState({cookingSkill:value}) : 
      this.setState({isVegeterian:value})
  }

  render() {
    return(
      <ScrollView style={CommonCSS.flexContainer}>
        <StatusBar backgroundColor="#fa6767" barStyle="light-content" />

        {/* Rate your cooking skills */}
        <View >
          <Text style={initialPageCSS.heading}>Rate your cooking skills!</Text>
        </View>
        <TouchableOpacity 
        onPress={this.userInitalInput.bind(this,'cookingSkill','Beginner')} 
        style={
          [initialPageCSS.buttons, 
          this.state.cookingSkill==='Beginner' ? initialPageCSS.acitveButton : null]
        }
        activeOpacity={0.5}>
          <Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
          <Text style={initialPageCSS.TextStyle}> Iam a Beginner </Text>
        </TouchableOpacity>
        <TouchableOpacity 
        onPress={this.userInitalInput.bind(this,'cookingSkill','Expert')} 
        style={
          [initialPageCSS.buttons, 
          this.state.cookingSkill==='Expert' ? initialPageCSS.acitveButton : null]
        }
        activeOpacity={0.5}>
          <Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
          <Text style={initialPageCSS.TextStyle}> Iam an Expert </Text>
        </TouchableOpacity>
        <TouchableOpacity 
        onPress={this.userInitalInput.bind(this,'cookingSkill','Professional')} 
        style={
          [initialPageCSS.buttons, 
          this.state.cookingSkill==='Professional' ? initialPageCSS.acitveButton : null]
        }
        activeOpacity={0.5}>
          <Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
          <Text style={initialPageCSS.TextStyle}> Iam a Professional </Text>
        </TouchableOpacity>
        {/* Rate your cooking skills */}

        {/* Are you Vegetarian */}
        <View>
          <Text style={initialPageCSS.heading}>Are you a Vegetarian!</Text>
        </View>
        <TouchableOpacity 
        onPress={this.userInitalInput.bind(this,'isVeg',false)} 
        style={
          [initialPageCSS.buttons, 
          this.state.isVegeterian ? null : initialPageCSS.acitveButton]
        }
        activeOpacity={0.5}>
          <Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
          <Text style={initialPageCSS.TextStyle}> Nope, Show me all Recipes </Text>
        </TouchableOpacity>
        <TouchableOpacity 
        onPress={this.userInitalInput.bind(this,'isVeg',true)} 
        style={
          [initialPageCSS.buttons, 
          this.state.isVegeterian ? initialPageCSS.acitveButton : null]
        }
        activeOpacity={0.5}>
          <Image source={require('../../assets/images/avatar.png')} style={initialPageCSS.ImageIconStyle}/>
          <Text style={initialPageCSS.TextStyle}> Yes, Hide recipes with meat</Text>
        </TouchableOpacity> 
        <View style = {initialPageCSS.getStartedBtnWrapper}>
          <Button 
            mode="contained"
            theme={{
              roundness: 5,
              width: '90%',
              dark: true,
              colors: {
                primary: '#ec4242',
                accent: "#ffffff",
              }
            }}
            contentStyle = {{height:50}}
            onPress = {this.props.updateUserInitialInput(this.state)}
          >
            Get Started
          </Button>
        </View>
        {/* Are you Vegetarian */}
      </ScrollView>
    );
  }
}


InitialDetails.propTypes = {
  updateUserInitialInput: PropTypes.func,
  userInput : PropTypes.object
}


function mapStateToProps (state) {
  alert(JSON.stringify(state))
  return{
      userInput : state
  }
}
// const mapStateToProps = state => ( { 

//   return{
//           userInput : state.userInitalInputFromUser
//       }
// } ) 


const mapDispatchToProps = dispatch => ({
  updateUserInitialInput: (userInput) =>
    dispatch(updateUserInitialInput(userInput)),
})

export default connect(mapStateToProps, mapDispatchToProps)(InitialDetails)

目前我还没有与Redux-saga连接，我不确定为什么它会在应用程序中引发这样的问题。相同的方法似乎在React应用程序中运行良好。有人可以帮我解决这个问题吗？

React Native =>在redux-saga迁移中的不变式违规

0 个答案: