动作创建者可以是具有动作方法的类

时间:2016-11-30 10:50:50

标签: reactjs redux reactjs-flux redux-thunk

通常在Redux(thunk)中,动作创建者是静态方法。但是我有一个特定的场景,其中动作创建者需要对不同的端点进行异步调用。一种方法是传入一个标志来确定要去的端点:

function _getEndPoint(isHouse) {
  return isHouse ? 'house' : 'flat';
}

export function post(model, isHouse = false) {
  return (dispatch, getState) => {
    dispatch({
      types: [POST, POST_SUCCESS, POST_FAILED],
      promise: (client) => client.post(`${_getEndPoint(isHouse)}`, {
        data: model,
      }),
    });
  };
}

但有没有办法创建一个类Propertypost作为公共方法,作为操作方法。因此,当我实例化Property类时,我定义属性的类型并在创建时设置正确的端点?

来自C#背景,我也想知道我是否可以使用泛型或继承来解决这个问题。

此外,这是一个很好的做法,尝试用类创建动作方法,因为我读到Redux更多的是编程的功能风格。

1 个答案:

答案 0 :(得分:0)

如果必须调用不同的端点(异步或非异步) - 这些是不同的操作。假设你想要处理错误。通用类型POST_FAILED不会告诉您哪个资源发生了故障。如果要根据它更改状态树怎么办?如果应以各种方式处理不同类型怎么办?功能方法POST_OF_SOMETHING_FAILED在这里更适合。小功能做小事。否则,您将不得不使用复杂的if块。

您可以实现某种动作生成器来摆脱代码重复,而不是使用类和继承。例如,如果要创建共享CRUD操作,则创建操作可能如下所示:

/actions/generators/create.js

import fetch from 'isomorphic-fetch';


function requestCreateItem(modelName) {
  return {
    type: `CREATE_${modelName.toUpperCase()}_REQUEST`,
  };
}

function receiveCreateItem(modelName, item) {
  return {
    type: `CREATE_${modelName.toUpperCase()}_SUCCESS`,
    item,
    receivedAt: Date.now(),
  };
}

function catchCreateItemError(modelName, error) {
  return {
    type: `CREATE_${modelName.toUpperCase()}_ERROR`,
    error,
    receivedAt: Date.now(),
  };
}

function createItem(modelName) {
  return (dispatch) => {
    dispatch(requestCreateItem(modelName));

    return fetch(`/${modelName}s`, {
      method: 'POST',
      credentials: 'same-origin',
    }).then(response => response.json()).then(json => {
      if (json.error) {
        dispatch(catchCreateItemError(modelName, json.error));
      } else {
        dispatch(receiveCreateItem(modelName, json));
      }
    }).catch(error => {
      dispatch(catchCreateItemError(modelName, error));
    });
  };
}


export default function create(modelName) {
  return () => createItem(modelName);
}

您可以在动作索引文件中将其用作构造函数。

/actions/index.js

import create from './generators/create';
const createBot = create('bot');
export const botActions = { createBot };

这是主要想法。