javascript - 期望 reducer 是一个函数

标签 javascript react-native redux react-redux

我创建了一个新的 react-native 项目并编写了一个 redux 演示。IOS 模拟器显示错误“Expected the reducer to be a function”。我试图从预览答案中解决问题,但它不起作用

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;

我的组件.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;

最佳答案

改变

import {reducers} from './src/reducer';
import {App} from './src/App';

import reducers from './src/reducer';
import App from './src/App';

当您导入模块的默认值时,不要使用大括号{}

关于javascript - 期望 reducer 是一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42827134/

相关文章:

reactjs - 如何在React Native中每次调用onPress函数时提供自动增量?

ios - react-native run-ios 构建卡住

reactjs - React hook 等待上一个调用完成

javascript - 处理来自多个元素的 Javascript 事件

javascript - 在测试我的 AngularJS Controller 时,如何在 $http.get promise 中模拟结果?

javascript - jQuery .getJSON 返回数组变量和 json 数组操作

javascript - JS While 确保数字不能再被整除

ios - 跨平台移动工具(Ionic、React-Native)上的 Twilio

reactjs - React createSlice 的 extraReducers 的状态访问

reactjs - React redux 将状态传递给子级