CODEWITHSUNDEEP
reactjsreduxreact-redux
Valeriy Donika
Valeriy Donika

Reputation: 466

It is OK to do in this way? (dispatch store) Redux

I have a question. For example, I have the following code:

//Actions

 export function getNews () {
   return Api.getNews()
       .then((response) => {
       if (typeof response !== 'undefined') {
        return MainStore.dispatch(NewsActionCreators.getNews(response));
       }
     })
     .catch((error) => // some logic);
}

//ActionsCreator

import { NewsConstants } from 'front/constants/NewsConstants';

import { Action } from 'redux-actions';

export function getNews(payload): Action {
    return {
        type: NewsConstants.NEWS_RECEIVED,
        payload,
    };
}

//Component

import * as NewsActions from 'front/actions/NewsActions';

componentDidMount() {
    getNews();
}

const mapStateToProps = (state, ownProps) => {
   return {
       news: state.News.getIn(['news']),
   };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {};
};

//MainStore

import {applyMiddleware, createStore, Store} from 'redux';
import { routerMiddleware } from 'react-router-redux';
import createBrowserHistory from 'history/createBrowserHistory';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import { Reducers} from 'front/reducers/index';
import promiseMiddleware from 'redux-promise-middleware';

const history = createBrowserHistory();
let middleware;

if (process.env.NODE_ENV !== 'production') {
    middleware = applyMiddleware(promiseMiddleware(), routerMiddleware(history), logger, thunk);
} else {
    middleware = applyMiddleware(promiseMiddleware(), routerMiddleware(history), thunk);
}

export const MainStore:Store<any> = createStore<any>(
    Reducers,
    middleware,
);

This works fine. But I just want to know is this the correct way? Or I need to call all actions by mapDispatchToProps inside components? Thanks :)

Updated. Added MainStore

Upvotes: 1

Views: 412

Answers (2)

Joshua
Joshua

Reputation: 3176

Miguel already answered your question. But I think a better way to handle mapDispatchToProps that is worth mentioning here: You can pass these action creators directly to the react-redux connect function like this: { actionCreator1, actionCreator2 }, or you can import all of the action creators import * as newActions and then spread them into the connect function like this { ...newActions }.

...
import { getNew } from 'front/actions/NewsActions';

class News extends React.Component {

  componentDidMount() {
    this.props.getNews();
  }

  render() { ... }
}

const mapStateToProps = state => {
  return {
    news: state.News.getIn(['news']),
  };
};

export default connect(mapStateTopProps, {
  getNews,
})(News);

Hope this help!

Upvotes: 1

Miguel Calder&#243;n
Miguel Calder&#243;n

Reputation: 3091

You're supposed to pass action creators to the component as props by means of mapDispatchToProps:

componentDidMount() {
    this.props.getNews();
}

...

const mapDispatchToProps = dispatch => ({getNews: () => dispatch(getNews())})

Upvotes: 3

Related Questions