redux-thunkを使用しているときにアクションオブジェクトがレデューサーに届かない

Question

私はreact-typescript-reduxで予定しているアプリケーションを作成していて、自分のサーバーからtodosをフェッチしたいと思っています。私のコンテナにthis.props.getTodos['todo1','todo2']を使用してtodosをハードコードすると、すべてが機能しますが、非同期に行うと、this.props.requestTodos()を使用しています。サーバーからのthis.props.requestTodos()応答を使用すると、getTodos actionCreatorに達しますが、何らかの理由でアクションオブジェクトがレデューサーに届かないため、状態が更新されません。これをどうやって解決するのですか？ actionCreators：

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)))