减速器方法不调用？

Question

我是React-native的新手，正在尝试使用React-redux存储，但是它没有调用reducer方法，请帮助我在哪里出错了。

由React Native和Redux制作移动应用程序。

似乎我的操作和状态运行正常，因为我做了console.log。

这里的问题是未调用我的减速器。

我确实将其记录在控制台上，但是没有结果。

我不知道是什么原因造成的。

Index.js

import {AppRegistry} from 'react-native';
import React from 'react'

import App from './App'
import {name as appName} from './app.json';

import {Provider} from 'react-redux';

import configureStore from './Components/Store/configureStore'

const store = configureStore();

const RNRedux = () => (
<Provider store = {store}>
    <App />
</Provider>

)
AppRegistry.registerComponent(appName, () => RNRedux);

APP.js

import React, {Component} from 'react';
import {Platform,Text, ScrollView,StyleSheet,KeyboardAvoidingView,Image,TouchableOpacity, View,Button,TextInput,ImageBackground} from 'react-native';
import jnpBgImage from './Components/Assets/Login_BG_Image.png'
import jnpImageTitle from './Components/Assets/jnptextlogo.png'

import {uiStartLoading, uiStopLoading} from './Components/Store/actions/index'

import {connect} from 'react-redux';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


class App extends Component {




startLoadHandler = () =>{

  this.props.startLoad();
}

stopLoadHandler = () =>{
  this.props.stopLoad();

}



  render() {
    return (
      <View style={{flex :1}}>
      <ImageBackground
          resizeMode={'stretch'} // or cover
          style={{flex: 1}} // must be passed from the parent, the number may vary depending upon your screen size
          source={jnpBgImage}
        >


        <ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator = {false}>
        <View style = {styles.container}>
          <Image style={styles.logo} source={jnpImageTitle} />
                <TextInput placeholder = 'User Name' 
                          selectionColor = 'blue' 
                         // value={this.state.username}
                         // onChangeText={username => this.setState({username})}
                          style = {styles.input}>
                </TextInput>
                <TextInput secureTextEntry = {true}
                           placeholder = 'Password' 
                           //value={this.state.password}
                           //onChangeText={password => this.setState({password})}
                           style = {styles.input}
                ></TextInput>

<View style = {styles.helpContainer}>

<TouchableOpacity 
     onPress={() => this.props.navigation.navigate('WebView',{nTitle : 'Help',url : 'https://jobsnprofiles.com/mobile/contact-sales.html'})}
     >
   <Text style = {{color : '#663333'}}>Need Help?</Text>
</TouchableOpacity>
<TouchableOpacity 
//onPress={() => this.props.navigation.navigate('ForgotPassword')}
>
<Text style = {{textDecorationLine: 'underline'}}>Forgor Password</Text>

</TouchableOpacity>
</View>      

<View>
<TouchableOpacity
     style={styles.button}
    // onPress={this.onLoginPress.bind(this)}
    onPress={this.startLoadHandler}
   >
     <Text style={styles.buttonText}>SignIn</Text>
   </TouchableOpacity>
<TouchableOpacity style={styles.button}>
 <Text
   style={styles.buttonText}
   //onPress={() => this.props.navigation.navigate('Registration')}
   onPress={this.stopLoadHandler}
  // title="Sign up"
 >
   Signup
 </Text>
</TouchableOpacity>
</View>




       </View>

          </ScrollView> 




       </ImageBackground>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
 flex : 1,
  justifyContent : 'center',
  alignItems : 'center',
//  borderRadius : 2,
//  borderColor :'red'
  },
  logo: {
    width: 300,
    height: 80 ,
    marginBottom : 40
  },
  Scrollcontainer: {
    flex : 1,
    borderRadius : 2,
    borderColor :'red'
     },
     helpContainer :{
      flexDirection : 'row',
      justifyContent : 'space-between',
      width : '80%',
  },

  input : {
    width : '80%',
    height : 40,
    backgroundColor: '#BDBDBD',
    color: "black",
    paddingHorizontal: 20,
    borderRadius : 5,
    marginBottom : 10,
  },
  button: {
    backgroundColor: "#663333",
    paddingVertical: 10,
    width : 200,
    justifyContent : 'center',
    alignItems : 'center',
    marginTop : 10,
    borderWidth: 1,
    borderRadius: 10,
    borderColor: '#663333'
  },
  buttonText: {
    textAlign: "center",
    color: "#FFF",
    fontWeight: "700",

  },

});

const mapsStateToProps = (state) =>{
        return {
          isLoading : state.isLoading.isLoading
        }
};

const mapDispatchToProps = (dispatch) => {
  return {
    startLoad : () => dispatch(uiStartLoading),
    stopLoad : () => dispatch(uiStopLoading)

  };
};
export default connect(mapsStateToProps,mapDispatchToProps)(App);

ActionType.js

export const UI_START_LOADIG = 'UI_START_LOADIG';
export const UI_STOP_LOADIG = 'UI_STOP_LOADIG';

ui.js（减速器）

import { UI_START_LOADING, UI_STOP_LOADING } from "../actions/actionTypes";

const initialState = {
  isLoading : false
};

const reducer = ( state = initialState, action) => {


// This method is not trigging 


console.log('calling reducer')
  switch (action.type) {
    case UI_START_LOADING:
      return {
        ...state,
        isLoading: true
      };
    case UI_STOP_LOADING:
      return {
        ...state,
        isLoading: false
      };
    default:
      return state;
  }
};

export default reducer;

ui.js（操作）

import {UI_START_LOADIG,UI_STOP_LOADIG} from './actionTypes';

export const uiStartLoading = () => {
    console.log('loading')
    return{
        type : UI_START_LOADIG
    };
};
export const uiStopLoading = () => {
    console.log('stop loading')
    return{
        type : UI_STOP_LOADIG
    };
};

configureStore.js

import thunk from "redux-thunk";
import uiReducers from './reducers/ui'


const rootReducers =  combineReducers({
     isLoading : uiReducers
});


let composeEnhancers = compose;

if (__DEV__) {
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}
const configureStore = () => {
    return createStore(rootReducers, composeEnhancers(applyMiddleware(thunk)))
}
export default configureStore;

index.js（操作）

export { uiStartLoading,uiStopLoading} from '../actions/ui'

Answer 1

您尚未在操作文件中调度您的操作，

您需要调度动作来告诉Redux调用reducer。

export const uiStartLoading = () => {
    console.log('loading')
 return dispatch => dispatch({ type : UI_START_LOADIG});
};
export const uiStopLoading = () => {
    console.log('stop loading')
 return dispatch => dispatch({ type : UI_STOP_LOADIG});

};