Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expected the reducer to be a function

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;
like image 809
laker Avatar asked Mar 16 '17 06:03

laker


People also ask

What is reducer function in Redux?

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.

What is reducer in react with example?

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.

Can a reducer return value?

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.

How are actions connected to reducer?

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.


1 Answers

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{}.

like image 179
wuxiandiejia Avatar answered Oct 05 '22 08:10

wuxiandiejia