React Native, Redux - TypeError: (0, _redux.createStore) не является функцией - PullRequest
Новая
       124

React Native, Redux - TypeError: (0, _redux.createStore) не является функцией

0 голосов
/ 08 мая 2020

Я хочу использовать Redux в проекте простого счетчика реакции. зависимости, которые я использовал в своем проекте.

"dependencies": { "react": "16.11.0" , "react-native": "0.62.2" , «react-redux»: «^ 7.2.0» , «redux»: «^ 4.0.5» }

Приложение . js

import React, {Component} from 'react';
import Counter from './Counter';
import {createStore} from 'redux';
import {Provider} from 'react-redux';

const myState = {counter: 0};

const reducer = (state = myState, action) => {
  switch (action.type) {
    case 'INCREASE':
      return {counter: state.counter + 1};
    case 'DECREASE':
      return {counter: state.counter - 1};
  }
  return state;
};

const store = createStore(reducer);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Counter />
      </Provider>
    );
  }
}

Счетчик. js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import {connect} from 'react-redux';

class Counter extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'gold',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'row',
        }}>
        <Button
          title="+"
          style={{minWidth: 50, justifyContent: 'center'}}
          onPress={() => this.increase()}
        />
        <Text
          style={{
            marginHorizontal: 15,
            fontSize: 20,
          }}>
          {this.state.counter}
        </Text>
        <Button
          style={{minWidth: 50, justifyContent: 'center'}}
          title="-"
          onPress={() => this.decrease()}
        />
      </View>
    );
  }
}

const mapStateToProbs = (state) => {
  return {counter: state.counter};
};

const mapDispatchProbs = (dispatch) => {
  return {
    increase: () => dispatch({type: 'INCREASE'}),
    decrease: () => dispatch({type: 'DECREASE'}),
  };
};

export default connect(mapStateToProbs, mapDispatchProbs)(Counter);

Но у меня такая ошибка:

TypeError: (0, _redux.createStore) не является функцией

enter image description here

Как мне избавиться от этой ошибки?

1 Ответ

2 голосов
/ 08 мая 2020

Я не нашел причину, по которой вы получаете redux createStore is not a function, но мне удалось заставить ваш код работать с небольшими изменениями.

Вот оно

Приложение. js

import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { createStore } from "redux";
import { Provider } from "react-redux";
import Counter from "./Counter";

const myState = { counter: 0 };

const reducer = (state = myState, action) => {
  switch (action.type) {
    case "INCREASE":
      return { counter: state.counter + 1 };
    case "DECREASE":
      return { counter: state.counter - 1 };
    default:
      break;
  }

  return state;
};

const store = createStore(reducer);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Counter />
      </Provider>
    );
  }
}

Счетчик. js

import React, { Component } from "react";
import { View, Text, Button } from "react-native";
import { connect } from "react-redux";

class Counter extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "gold",
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "row"
        }}
      >
        <Button
          title="+"
          style={{ minWidth: 50, justifyContent: "center" }}
          onPress={this.props.increase}
        />
        <Text
          style={{
            marginHorizontal: 15,
            fontSize: 20
          }}
        >
          {this.props.counter}
        </Text>
        <Button
          style={{ minWidth: 50, justifyContent: "center" }}
          title="-"
          onPress={this.props.decrease}
        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  return { counter: state.counter };
};

const mapDispatchToProps = dispatch => {
  return {
    increase: () => dispatch({ type: "INCREASE" }),
    decrease: () => dispatch({ type: "DECREASE" })
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

Изменения: 

this.state.counter => this.props.counter
this.increase => this.props.increase
this.decrease => this.props.decrease

Сообщите мне, если это поможет!

Рабочий пример здесь https://codesandbox.io/s/react-native-hlmhc?fontsize=14&hidenavigation=1&theme=dark

...