将上下文传递给React Thunk？

Question

我觉得我对我怎么想使用咚......我的理解是，我可以用它来调度异步操作这样的困惑：

应用程序/ index.ts

import { applyMiddleware, createStore } from "redux"; 
import thunk from "redux-thunk"; 
import reducer from "./reducers/index"; 

const store = createStore(reducer, {}, applyMiddleware(thunk)); 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById("root") as HTMLElement, 
); 

actions.ts

export interface RemoveDoneAction { 
    type: TypeKeys.REMOVE_DONE; 
    done: Task; 
} 

export const removeDone: ThunkAction<Promise<void>, Task, {}> = 
    (dispatch, getState) => { 
    const done = getState(); 
    return done.delete() // Call API 
    .then(() => {  // Send Action 
     const action: RemoveDoneAction = { 
      type: TypeKeys.REMOVE_DONE, 
      done, 
     }; 
     dispatch(action); 
    }); 
    }; 

todo.tsx

import * as React from "react"; 
import { connect } from "react-redux"; 
import { Dispatch } from "redux"; 
import { removeDone } from "./actions"; 

interface IDoneProps { 
    doneList: Task[]; 
    dispatch: Dispatch<{}>; 
} 

class Done extends React.Component<IDoneProps, {}> { 

    public removeFromDone = (index: number) => { 
    const todo = this.props.doneList[index]; 

    //call thunk action! 
    removeDone(this.props.dispatch,() => (todo), {}).then(() => { 
     console.log("thunk then!"); 
    }); 
    } 

public render() { 
    //create a item from each done 
    const doneItems = this.props.doneList.map((done, i) => { 
     return (
     <TodoItem 
      text={done.description} 
      key={i} 
      index={i} 
      icon="close" 
      iconColor="#d67866" 
      onClick={this.removeFromDone} 
     /> 
    ); 
    }); 

    return (
     <Card title={`${this.props.doneList.length} todo${this.props.doneList.length > 1 ? "s" : ""} done`}> 
     <ul> 
      {doneItems} 
     </ul> 
     </Card>); 
    } 
} 


export default connect((state) => { 
    return { doneList: state.done }; 
})(Done); 

虽然这完全工作，我意识到，我传递上下文进入状态，不传递任何进入extraArgs ...

我甚至不明白为什么会形实转换需要访问因为它只是向减速器发出行动？

我怀疑我不是在做正确的事情......

Answer 1

好吧，我想通了与本文提供的帮助......

基本上，我的行动创造者应该是这个样子的，而不是：

export const removeDone = (done: Task): ThunkAction<Promise<void>, GlobalState, null> => 
    (dispatch, getState) => { 
    return done.delete().then(() => { 
     console.log(getState()); 
     const action: RemoveDoneAction = { 
     type: TypeKeys.REMOVE_DONE, 
     done, 
     }; 
     dispatch(action); 
    }); 
    }; 

给我打电话，我只是通过行动的创造者和注射状态的redux middlewear处理。

this.props.dispatch(removeDone(todo)); 

这使得很多更有意义......