Redux Thunk : redux thunk没有发送一个操作

Question

我正在研究thunk，并试图找出如何实现api调用。它不起作用，所以我回到了最基本的。当我单击控制台中的butto时，显示分派不是一个函数。

我认为问题来自于应用中间件，因为当我注释掉它时，增量和递减按钮是working.What，我做错了吗？

const store = createStore(root,
  compose(
    applyMiddleware(fetch), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

  ))

const Counter = (props) => {
    console.log(props);
    return (
        <div>
            <h1>{props.count}</h1>
            <button onClick={props.increment}>+</button>
            <button onClick={props.decrement} >-</button>
            <button onClick={props.fetch} >Add</button>

        </div>
    );
}

const mapStateToProps = (state) => {

    return {
        count: state.CountReducer.count,
        // item: state.CountReducer.item
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        increment: bindActionCreators(increment, dispatch),
        decrement: bindActionCreators(decrement, dispatch),
        fetch: bindActionCreators(fetch, dispatch),


    }
}

这是雷声和减速机的代码

export const fetch = () => {
    return dispatch => {

        axios.get('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => dispatch(add(response.data)))
    }

}
export const add = (answer) => (
    {
        type: "ADD_DATA",
        payload: answer
    }
)

const initialState = {
    count: 0,
    item: []


}

export function CountReducer(state = initialState, action) {
    console.log("reducer");
    console.log("state");
    switch (action.type) {
        case ADD_DATA:

            return {
                ...state,
                item: action.payload
            }
        case INCREMENT_COUNT:
            return {
                ...state,
                count: state.count + 1
            }



        case DECREMENT_COUNT:
            return {
                ...state,
                count: state.count - 1
            }
        case GET_FETCHED_POSTS:
            return {
                ...state,
                item: action.payload
            }
        default:
            return state

    }

}

Answer 1

尝试使用此代码创建存储

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const initialState = {};
const middleware = [thunk];

const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;

const enhancer = composeEnhancers(applyMiddleware(...middleware));

const store = createStore(reducer, initialState, enhancer);

export default store;