Get Redux store data in React Native component

Question

I'm getting started in Redux and React Native and I'm struggling a lot trying to fetch stored data in a component, It's anything special, just a button to mutate the store and another to print it as Im still a newborn in this

// TestComponent.js

<Button onPress={ () => { this.props.todoAdd("cafee") } }>
    <Text>Covfefe</Text>
</Button>

<Button onPress={ () => { console.log(this.state) } }>
    <Text>Todo alc</Text>
</Button>

const mapStateToProps = (state, props) => {
  return {
    todos: state,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    todoAdd: (name) => dispatch({type: 'TODO_ADD', todo: { id: '0', name, completed: false }}),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent)

The add button works, I registered a suscription in App.js so I can see every update in the store, Im glad at least one thing does works but Im so confused, I want to fetch the stored data but I cannot make it work!

I read that mapStateToProps actually listens for changes and triggers, updating the props of the component with the data you wrote that you component need, I wrote props.todos = state so the entire state should be in this.props.todos, doesn't it? I dont know but when I print the component props I get an empty object.

There are the other configuration files from my store:

// store/index.js

import {createStore} from 'redux';
import Reducers from './reducers'

export default configureStore = () => {
    let store = createStore(Reducers, [])
    return store
}

// store/reducers.js

export default function reducer(state, action) {
    switch(action.type) {
      case 'TODO_ADD' : {
        return applyAddTodo(state, action);
      }
      case 'TODO_TOGGLE' : {
        return applyToggleTodo(state, action);
      }
      default : return state;
    }
  }
  function applyAddTodo(state, action) {
    return state.concat(action.todo);
  }
  function applyToggleTodo(state, action) {
    return state.map(todo =>
      todo.id === action.todo.id
        ? Object.assign({}, todo, { completed: !todo.completed })
        : todo
    );
}

// App.js

import {Provider} from 'react-redux';
import configureStore from './store/index'

let store = configureStore()
const unsubscribe = store.subscribe(() => {
  console.log('store update, current state:');
  console.log(store.getState());
});

const MainNavigator = createStackNavigator({
  Home: {screen: TestComponent},
});

const Root = createAppContainer(MainNavigator);

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

I just want to know how can I fetch the data to print it, I just started learning redux so any tip is greatly welcomed, anyways thank you for reading me.

Answer 1

Try console.log(this.props.todos) Since you are mapping your whole redux store state to the todos object you should find it at this.props.todos