使用 redux-thunk 时 Action 对象没有到达 reducer

Question

我正在使用 react-typescript-redux 制作一个待办事项应用程序，并想从我的服务器获取待办事项。当我对待办事项进行硬编码时，在我的容器中使用 this.props.getTodos['todo1','todo2']，一切正常，但是当我尝试异步执行时，使用 this.props.requestTodos() - 它没有。当我使用来自服务器的 this.props.requestTodos() 响应到达 getTodos actionCreator 但由于某种原因操作对象没有到达 reducer，所以状态没有得到更新。我该如何解决？动作创作者：

export const getTodos = (todoItems: ReadonlyArray<string>) => {
    return {
        type: Constants.GET_TODOS as typeof Constants.GET_TODOS,
        payload: {todoItems},
    };
};

export const requestTodos = () => {
    return (dispatch: any) => {
        // tslint:disable-next-line:no-expression-statement
        axios('/todos')
        .then((todos: any) => getTodos(JSON.parse(todos.data).todos))
        .catch((err: any) => console.log(err));
    };
};

商店：

const defaultState: IDefaultState = {
    todoItems: [],
};

const store = createStore(
    rootReducer,
    defaultState,
    applyMiddleware(
        thunk,
        createLogger(),
    ));

减速器：

const rootReducer = combineReducers({
    todoItems,
});

TodoItems（减速器）：

function todoItems(state = ([] as ReadonlyArray<string>), action: any): any {
  switch (action.type) {
    case Constants.GET_TODOS:
      return [
        ...state,
        action.payload.todoItems,
      ];
    default:
      return state;
  }
}

容器组件：

class TodoList extends React.Component<IProps, {}> {

    public componentDidMount(): any {
        // tslint:disable-next-line:no-expression-statement
        this.props.requestTodos();
    }

    public render(): JSX.Element {
        const todoItems = this.props.todoItems.map((text, i) => (
            <TodoItem key={i} text={text} />
        ));

        return(
            <div>
                <ul className='todo-list'>
                    {todoItems}
                </ul>
            </div>
        );
    }

}

Answer 1

看起来您正在调用 getTodos()，但实际上并没有调度它。试试这个：

.then((todos: any) => dispatch(getTodos(JSON.parse(todos.data).todos)))

使用 redux-thunk 时 Action 对象没有到达 reducer

Action object doesn't reach the reducer when using redux-thunk

reactjs

redux

redux-thunk

react-redux