Redux store isn't getting updated

Question

I have built this app using create-react-native-app, the action is dispatched but the state isn't being updated and I'm not sure why.

I see the action being logged (using middleware logger) but the store isn't getting updated, I am working on Add_Deck only for now

Here is my reducer:

// import 
import { ADD_CARD, ADD_DECK } from './actions'

// reducer
export default function decks(state ={}, action){
    switch(action.type){          
        case ADD_DECK: 
            return {
                ...state,
                [action.newDeck.id]: action.newDeck
            }

        case ADD_CARD: 
            return {
                ...state,
                [action.deckID]: {
                    ...state[action.deckID],
                    cards: state[action.deckID].cards.concat([action.newCard])

                }
            }

        default: return state 
    }
}

Actions file:

// action types
const ADD_DECK = "ADD_DECK";
const ADD_CARD = "ADD_CARD";

// generate ID function
function generateID() {
  return (
    "_" +
    Math.random()
      .toString(36)
      .substr(2, 9)
  );
}
// action creators

function addDeck(newDeck) {
  return {
    type: ADD_DECK,
    newDeck
  };
}
// export
export function handleAddDeck(title) {
  return dispatch => {
    const deckID = generateID();
    // const newDeck = { id: deckID, title, cards: [] };
    dispatch(addDeck({ id: deckID, title, cards: [] }));
  };
}


function addCard(deckID, newCard) {
  // { question, answer }, deckID
  return {
    type: ADD_CARD,
    deckID,
    newCard
  };
}

// export
export function handleAddCard(deckID, content) {
  // { question, answer }, deckID
  return dispatch => {
    const newCard = { [generateID()]: content };
    dispatch(addCard(deckID, newCard));
  };
}

And react-native component:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from "react-native";
import {red, white} from '../utils/colors'

import { connect } from 'react-redux'
import { handleAddDeck } from '../redux/actions'

class AddDeck extends Component {
    state = {
        text:""
    }

    handleSubmit = () => {
      this.props.dispatch(handleAddDeck(this.state.text))
        this.setState(()=>{
            return { text: ""}
        })
    }
    render() {
        return (
          <View style={styles.adddeck}>
            <Text> This is add deck</Text>
            <TextInput
            label="Title"
              style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Deck Title"
              value={this.state.text}
            />
            <TouchableOpacity style={styles.submitButton} onPress={this.handleSubmit}>
                <Text style={styles.submitButtonText}>Create Deck</Text>
            </TouchableOpacity>
          </View>
        );
    }
}

function mapStateToProps(decks){
  console.log("state . decks", decks)
  return {
    decks
  }
}

export default connect(mapStateToProps)(AddDeck);

const styles = StyleSheet.create({
  adddeck: {
    marginTop: 50,
    flex: 1
  },
  submitButton: {
    backgroundColor: red,
    padding: 10,
    margin: 15,
    height: 40,

  },
  submitButtonText: {
    color: white
  }
});

Answer 1

I guess you forgot to export your types from the actions file thus the switch(action.type) does not trigger the needed case statement.

Maybe try to add as the following:

export const ADD_DECK = "ADD_DECK";
export const ADD_CARD = "ADD_CARD";

Or further debugging just to see if the values are the ones what you are looking for:

export default function decks(state = {}, action) {
    console.log({type:action.type, ADD_DECK}); // see what values the app has

    // further code ...
}

I hope that helps! If not, let me know so we can troubleshoot further.