通过操作将参数传递给具有promise / thunk的reducer

时间:2017-02-21 21:04:49

标签: reactjs redux promise redux-thunk

我使用react和redux与Promise / thunk作为中间件。它很棒。

有一些我无法弄清楚的东西。以下作品:

我从我的组件发出一个动作:

this.props.dispatch(addTag({ name: name, photoId: this.props.photoId}))

我的动作执行包裹在thunk中的ajax并返回一个promise:

export function addTag(payload) {


var url = "/api/photos/".concat(payload.photoId, "/addtag?name=" ,payload.name)
  return function(dispatch) {
    var request = new Request(url, {headers: headers});
    fetch(request)
      .then((response) => {
        dispatch({type: "ADD_TAG", payload: response.json()})
      })
      .catch((err) => {
        dispatch({type: "ADD_TAG", payload: err})
      })
  }
}

并且减速器拿起它:

  case 'ADD_TAG_FULFILLED': {
    newState = state
      .set('tags', action.payload.tags)
      .set('inputValue', '')
    return newState
  }

现在,如果我想将传递给操作的有效负载传递给reducer,该怎么办? (为了让我进入状态并返回组件...... 我只能这样做,通过混合Thunk和那种"打破"承诺中间件功能......这是最好的解决方案吗?

export function addTag(payload) {
  var url = "/api/photos/".concat(payload.photoId, "/addtag?name=" ,payload.name)
  return function(dispatch) {
    var request = new Request(url, {headers: headers});
    fetch(request)
      .then((response) => {
        return (response.json())
      })
      .then((json) => {
        dispatch({type: "ADD_TAG", payload: {suggestions: json, pl: payload})
      })
      .catch((err) => {
        dispatch({type: "ADD_TAG", payload: err})
      })
  }
}

1 个答案:

答案 0 :(得分:0)

谢谢@Mateusz

解决方案是:

export function tagInput(tagInput) {
  var url = '/api/photos/get_tag_list?term='.concat(tagInput);
  return function (dispatch) {
    var request = new Request(url, { headers: headers, method: 'GET' });
    fetch(request)
      .then(response => {
        dispatch({ type: 'TAG_INPUT', payload: response.json() });
      })
      .catch((err) => {
        dispatch({ type: 'TAG_INPUT_ERROR', payload: err });
      })
      .then(() => {
        dispatch({ type: 'TAG_INPUT_VALUE', payload: tagInput });
      });
  };
}