在Redux中,将数据发布到服务器的最佳方法是什么?

时间:2017-05-01 11:03:06

标签: javascript redux react-redux redux-promise-middleware

我想将数据发布到服务器..我的操作是这样的:

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);
  });
};

我有三种方式。第一种方法是导入存储,并在我的操作中调用getState方法,第二种方式是在reducer中调度操作,最后一种方法是将我的操作中的所有数据作为参数传递。哪一个是正确的?我读了this question,我很担心反模式。

2 个答案:

答案 0 :(得分:2)

您应该考虑使用import { connect } from 'react-redux'并使用containers

您可以在功能mapStateToProps上访问您的商店,从容器中发送您的所有操作数据。

它的签名是

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

您可以获得state部分可以传递给您的行动。

该动作使用ajax对您从api传递的数据执行发布到您的api。

在您的操作中,您可以考虑使用isomorphic-fetch

快速举例:

import 'isomorphic-fetch'

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

如果您需要直接访问商店,可以使用.getState(),直接访问状态可以被视为反模式,但这实际上取决于您的体系结构设计。 我建议看看mapStateToProps

如何访问商店的示例。

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

答案 1 :(得分:0)

我总是使用第三种方式,将数据传递给动作。数据可以是store.getState()中的数据,也可以是params或从服务器获取数据所需的任何数据。