React native axios api calls with redux

Question

I'm struggling to get a basic api call setup with redux and axios in React Native.

This is my reducer index.js

import { combineReducers } from 'redux'
import LibaryReducer from './LibraryReducer'
import ImportLibraryReducer from './ImportLibraryReducer'

let defaultState = {
    card: null
}


const mainReducer = (state = defaultState, action) => {
    if(action.type === "CHANGE_CARDS") {
        return {
            ...state,
            card: action.card
        }
    } else {
       return {
        ...state
       }
    }
}

export default mainReducer

This is my action index.js

import axios from "axios"

export function loadCards(){
    return(dispatch)=>{
        return axios.get('http://localhost:4000/reports')
                .then(response => {
                    dispatch(changeCards(response.data))
                })
    }
}

export function changeCards(cards) {
    return{
        type: "CHANGE_CARDS",
        card: card
    }
}

This is my app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MainPage from './components/MainPage'
import { Header } from "native-base"

import Card from './components/Card'

import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

import reducers from './reducers'

const store = createStore(reducers, applyMiddleware(thunk))

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={store}>
        <View>
          <Header ><Text>hello</Text></Header>
          <Card />
        </View>
      </Provider>
    );
  }
}

And, finally, this is where I'm trying to retrieve the data from the api call:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import {Collapse,CollapseHeader, CollapseBody, AccordionList} from 'accordion-collapse-react-native';
import { connect } from 'react-redux'
import * as actions from '../actions'

class Card extends Component {



  render() {

    const titleStyle = {
      backgroundColor: '#edeeef',
      fontWeight: "bold",
      color: '#454647',
      fontSize: 16,
      left: 8,
      fontFamily: 'Ionicons',
      top: 10
    }

    const descMarkStyle = {
      left: 8,
      top: 4,
      fontFamily: 'Ionicons',
      color: '#454647',
      fontSize: 16
    }

    console.log('in the render', this.props)

    return (
      <View>
          <Collapse >
              <CollapseHeader>
                <View
                  style={{
                    backgroundColor: '#edeeef',
                    height: 38,
                    postion: 'absolute',
                    borderBottomWidth: .5,
                    borderBottomColor: '#black'
                  }} 
                >
                  <Text style={titleStyle}>
                   test
                  </Text>
                </View>

              </CollapseHeader>
              <CollapseBody>
                <Text style={descMarkStyle}>test</Text>
                <Text style={descMarkStyle}>test</Text>
              </CollapseBody>
            </Collapse>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    state
   };
 }

 export default connect(mapStateToProps)(Card);

When I try to console log this.props in the component above, I get the default state of card: null without the api running: https://i.sstatic.net/DWtmF.jpg

I'm new to redux, and I feel like there is something obvious that I'm missing.

Answer 1

You should trigger your action in the componentDidMount lifecycle method in your Card component. Also, you can destructure your actions in your imports and in your connect.

import { loadCards } from '../actions'

class Card extends Component {

componentDidMount() {
  this.props.loadCards()
}

And in connect:

export default connect(mapStateToProps, { loadCards })(Card);

Also in the changeCards action:

card: cards