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;
REDUCER: In redux, the reducers are the pure functions that contain the logic and calculation that needed to be performed on the state. These functions accept the initial state of the state being used and the action type. It updates the state and responds with the new state.
The function you pass to reduce is known as a “reducer”. It takes the result so far and the current item, then it returns the next result. React reducers are an example of the same idea: they take the state so far and the action, and return the next state. In this way, they accumulate actions over time into state.
Reducers always have to return something even if it's null ; they should never return undefined . If a reducer's state is an object, you must always return a new object instead of editing the object in place.
When you dispatch an action creator it passes the action object to the root reducer. The action object is passed through the entire state tree and any reducers that process the action type consume it.
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{}
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With