reactjs - Redux Thunk：redux thunk 没有调度一个动作

Question

我正在查看 thunk 并试图弄清楚如何实现 api 调用。它不起作用，所以我回到了最基本的东西。当我单击控制台中的按钮时，显示调度不是功能。

我认为问题来自applymiddleware，因为当我将其注释掉增量和减量按钮正在工作时。我做错了什么？

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


    }
}

这是thunk和reducer的代码

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

    }

}

标签： reactjs

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;