How to get dispatch redux

Question

I'm learning redux and react. I am following some tutorials, in order to make a app.

I have this action:

export function getDueDates(){
  return {
    type: 'getDueDate',
    todo
  }
}

this is the store:

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

export default createStore(duedates)

This is the reducer:

import Immutable from 'immutable'

export default (state = Immutable.List(['Code More!']), action) => {
  switch(action.type) {
    case 'getDueDate':
      return state.unshift(action.todo)
    default:
      return state
  }
}

and in the entry point js I have this:

import React from 'react';
import ReactDOM from 'react-dom';

import store from './app/store'
import { Provider } from 'react-redux'

import App from './app/Components/AppComponent';


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

Now, (according to some examples), I should call getDueDate from the dispatch but I dont get how to get the dispatch on the component, to trigger the action

Answer 1

Use connect from react-redux package. It has two functions as params, mapStateToProps and mapDispatchToProps, which you are interested in now. As per answer from Nick Ball, which is partially right, you will be exporting like this:

export default connect(mapStateToProps, mapDispatchToProps)(App)

and your mapDispatchToProps will look something like this:

function mapDispatchToProps (dispatch, ownProps) {
  return {
    getDueDate: dispatch(getDueDate(ownProps.id))
  }
}

as long as your component connected to the store has property id passed from above, you'll be able to call this.props.getDueDate() from inside of it.

EDIT: There is probably no need of using an id in this case, however my point was to point out that props go as second parameter :)

Answer 2

The missing piece here is the connect function from react-redux. This function will "connect" your component to the store, giving it the dispatch method. There are variations on how exactly to do this, so I suggest reading the documentation, but a simple way would be something like this:

// app/Components/AppComponent.js

import { connect } from 'react-redux';

export class App extends React.Component {

    /* ...you regular class stuff */

    render() {

        // todos are available as props here from the `mapStateToProps`
        const { todos, dispatch } = this.props;

        return <div> /* ... */ </div>;
    }
}

function mapStateToProps(state) {
    return {
        todos: state.todos
    };
}

// The default export is now the "connected" component
// You'll be provided the dispatch method as a prop
export default connect(mapStateToProps)(App);