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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在redux和redux thunk中使用异步调度传递参数相关的知识,希望对你有一定的参考价值。

当前未返回我的地图函数。我尝试设置动作以执行异步调度,但是仍然没有运气。记录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
  );
答案

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

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

;

希望有帮助

以上是关于在redux和redux thunk中使用异步调度传递参数的主要内容,如果未能解决你的问题,请参考以下文章

使用 redux thunk 测试异步操作

Redux thunk - 嵌套调度的函数/动作

Redux-Thunk - 异步动作创建者承诺和链接不起作用

ReactJS + Redux + Reduc-thunk 无法调度承诺

如何使用 Redux Thunk 链接动态系列的异步操作?

在 Redux 中链接多个异步调度