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.

Dagur Leó · Accepted Answer · 2019-11-13 01:18:16Z

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

answered Nov 13, 2019 at 1:18

Dagur Leó

7084 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

H3lltronik Over a year ago

I modified my component state so it has todos as an empty array to see if it was the problem, when adding records I can see the new records since I suscribed to incoming changes but when I try to print this.props.todos I only get an empty array, mapStateToProps doesnt change my component props but it is actually being called, I already tested it so I really dont know whats wrong :c

H3lltronik · Accepted Answer · 2019-11-13 17:47:02Z

0

Okay so I found what was wrong with my code, when I try to print my store I was doing console.log(this.state) convinced that mapStateToProps modifies the actual state of the component but it doesnt, it passes the state to the props of the component (as the function name indicates...) :c

answered Nov 13, 2019 at 17:47

H3lltronik

8961 gold badge11 silver badges32 bronze badges

Collectives™ on Stack Overflow

Get Redux store data in React Native component

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related