Expected the reducer to be a function
19,046
Change
import {reducers} from './src/reducer';
import {App} from './src/App';
to
import reducers from './src/reducer';
import App from './src/App';
When you import the module's default, dont't use brace{}
.
Author by
laker
Updated on June 07, 2022Comments
-
laker almost 2 years
I create a new react-native project and write a redux demo.IOS Simulator show the error 'Expected the reducer to be a function'.I tried to solve the problem from the preview answers,but it doesn't work
index.ios.js
import React, {Component} from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; import {createStore} from 'redux'; import {Provider} from 'react-redux'; import {reducers} from './src/reducer'; import {App} from './src/App'; const store = createStore(reducers) export default class rnredux extends Component { render() { return ( <View style={styles.container}> <Provider store ={store}> <App/> </Provider> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, }); AppRegistry.registerComponent('rnredux', () => rnredux);
App.js
import {connect} from 'react-redux'; import MyComponent from './myComponent'; function mapStateToProps(state) { return {text: state.text, name: state.name} } function mapDispatchToProps(dispatch) { return { onChange: (e) => dispatch({type: 'change', payload: e.target.value}) } } const App = connect( mapStateToProps, mapDispatchToProps )(MyComponent); export default App;
myComponent.js
import React,{Component} from 'react'; import {Text,TextInput} from 'react-native'; export default class myComponent extends Component{ render(){ <View> <Text>{this.props.text}</Text> <TextInput defaultValue = {this.props.name} onChangeText = {this.props.onChange}></TextInput> </View> } }
reducer.js
import {combineReducers} from 'redux'; const reducerAction = (state = { text: '你好,访问者', name: '访问者' }, action) => { switch (action.type) { case 'change': return { name: action.payload, text: '你好,' + action.payload }; default: return state; } } const reducers = combineReducers({ reducerAction }) export default reducers;
-
Vijender Kumar over 6 yearscan you please explain what is the difference between {reducers} and reducers. it worked for me though, but still i want to know.
-
wuxiandiejia over 6 years@Vijender Kumar The
reducers
is used to import the function or variable that use the keyworddefault
the module exports,the{reducers}
is used to import the other function. The default function just likemodule.exports
in nodejs,other function withoutdefault
likeexports
.