In Redux, what is the best way to post data to a server?

Question

I want to post data to a server.. my action is like this:

export function addNewTodo(text) {
  return {
    type: 'ADD_NEW_TODO',
    payload: addNewTodoApi(text)
  };
}

let addNewTodoApi = function(text) {
  return new Promise(function(resolve, reject) {
    //implement fake method for get data from server
    setTimeout(function () {
      resolve({
        text:     text,
        done:     ??,
        assignTo: ??,
        Project:  ??,
        Category: ??,
        id:       ??
      });
    }, 10);
  });
};

I have three way. The first way is import store and and call getState method in my action and the second way is dispatch action in reducer and the last way is pass all data in my action as argument. Which one is correct? I read this question and I'm worried about antipatterns.

Not sure about the benefits of using setTimeout in your code. — GibboK, May 02 '17 at 06:58

GibboK · Accepted Answer · 2017-05-03T13:32:19.933

You should consider using import { connect } from 'react-redux' and using containers.

You access your store on function mapStateToProps, you send all your data for your action from the container.

The signature for it is

const mapStateToProps = (state, ownProps) => {}

There you get the state which a part could be passed to your action.

The action perform post to your api using ajax with data you passed from state.

In your action your could consider using isomorphic-fetch.

Quick example:

import 'isomorphic-fetch'

const postData = ()=> ({
  type: types.POST_YOURACTION,
  payload: new Promise((resolve, reject) => {
    fetch(api.postData(), {method: 'POST', }).then(response => {
      resolve(response.json())
    })
  })
})

In case if you need to access the store directly you could use .getState(), accessing state directly could be considered an anti-pattern but it really depends on your architecture design. I would suggest to look look at mapStateToProps.

Example of how to access your store.

import store from 'app/store'
store.getState().yourReducer.data

thanks for your response but my question is how can i access to store in this action? — hossein derakhshan, May 02 '17 at 07:19
@hosseinderakhshan just load your store and use store.getState(); — GibboK, May 02 '17 at 07:33
is access store in action is anti-pattern? please read this link :http://stackoverflow.com/questions/35667249/accessing-redux-state-in-an-action-creator — hossein derakhshan, May 02 '17 at 07:56

score 0 · Answer 2 · answered May 03 '17 at 04:36

0

I always use the third way, pass data to the action. The data can be the data in store.getState() or from params or whatever you need to get data from server.

answered May 03 '17 at 04:36

Dat Tran

1,576
1
12
16

In Redux, what is the best way to post data to a server?

2 Answers2