在redux和redux thunk中使用异步调度传递参数

Question

当前未返回我的地图函数。我尝试设置动作以执行异步调度，但是仍然没有运气。记录ID时，我的字符串已正确返回

动作：

const getData = id => {
  return {
    type: "FETCH_DATA_FULFILLED",
    payload: {
      id
    }
  };
}

export const fetchData = id => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(getData(id));
      console.log(id)
    }, 1000);
  };
}

减速器：

const initialArray = {fetch:[], error: null}

const fetchData = (state = initialArray, action) => {
  switch (action.type) {
    case "FETCH_DATA_FULFILLED":
      return { fetch: action.payload }
    default:
      return state
  }
}
export default fetchData

索引减少器：

const rootReducer = (history) => combineReducers({
  fetch: fetchReducer,
  router: connectRouter(history)
})

Component：

componentDidMount() {
    this.props.fetchData("../assets/data/output.json");
  }

 _renderDots = (fetch, count) => {
    return (
      <ol className="carousel-indicators">
        {fetch.map((item, index) => {
          let componentNames = classNames({
            "active": index === count
          });
          let id = `carousel${index}`;
          return (
            <li id={id} data-target="#carousel" data-slide-to={index} className={componentNames} key={index} onClick={e => this._onDotClick(index)} />
            );
          })
        }
      </ol>
    );
  }


render() {
    const { count, fetch } = this.props;
    return (
      <div 
        id="carousel" 
        className="carousel slide carousel-fade" 
        data-ride="carousel" 
        data-interval="5000">
          {this._renderDots(fetch, count)}
      </div>
    );
  }

const mapStateToProps = state => ({ fetch: state.fetch.fetch });
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    { fetchData },
    dispatch
  );

Answer 1

您的有效载荷是一个对象而不是数组，您可以尝试此操作

const getData = id => {
return {
type: "FETCH_DATA_FULFILLED",
payload: [id]

};}

希望有帮助