在 React Native 组件中获取 Redux 存储数据

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

Answer 2

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