我是React-native的新手，正在尝试使用React-redux存储，但是它没有调用reducer方法，请帮助我在哪里出错了。
由React Native和Redux制作移动应用程序。
似乎我的操作和状态运行正常，因为我做了console.log。
这里的问题是未调用我的减速器。
我确实将其记录在控制台上，但是没有结果。
我不知道是什么原因造成的。
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'
答案 0 :(得分：0)
您尚未在操作文件中调度您的操作，
您需要调度动作来告诉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});
};