React Native , Redux - TypeError: (0 , _redux.createStore) is not a function

Question

I want to use Redux in a simple react native counter project. dependencies I've used in my project.

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

App.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>
    );
  }
}

Counter.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);

But I have got this error :

TypeError: (0 , _redux.createStore) is not a function

How can I get rid of this error?

Answer 1

I didn't found the reason why you are getting redux createStore is not a function but I was able to make your code work with few changes.

Here it is

App.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>
    );
  }
}

Counter.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);

Changes:

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

Let me know if this helps!

Working example here https://codesandbox.io/s/react-native-hlmhc?fontsize=14&hidenavigation=1&theme=dark