Redux动作未触发reducers

Question

问题

我使用Redux store将我的React应用程序连接起来，并添加了一个api动作来从后端收集数据，包括中间件redux-promise。大部分东西似乎都能运行，因为我可以在React Web编辑器中看到我的存储以及组合减速器键。当我调用我的操作时，它可以工作并记录完成的promise。然而，我的减速器从未运行。我认为这是主容器上调度的问题，但我已经尝试了我能想到的每一种方式 - 常规dispatch（）和bindActionCreators。救命啊！

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import promiseMiddleware from 'redux-promise';
import RootReducer from './reducers';

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware)(createStore)

let store = createStore(RootReducer);

ReactDOM.render(
            <Provider store={store}>
                <App />
            </Provider>, 
            document.getElementById('root'));`

Combine Reducers

import { combineReducers } from 'redux';
import ReducerGetPostings from './reducer_get_postings'

const rootReducer = combineReducers({
    postingRecords: ReducerGetPostings
})

export default rootReducer;

Reducer

import { FETCH_POSTINGS } from '../actions/get_postings'

export default function (state = null, action) {
    console.log('action received', action)
    switch (action.type) {
        case FETCH_POSTINGS:
            return [ action.payload ]
    }
    return state;
}

动作API

import axios from 'axios';
import { url } from '../api_route';

export const FETCH_POSTINGS = 'FETCH_POSTINGS'

export function fetchpostings() {
    const postingRecords = axios.get(`${url}/api/postings`)

    console.log('Postings', postingRecords)
    return {
        type: FETCH_POSTINGS,
        payload: postingRecords
    };
}

Container

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { fetchpostings } from '../../actions/get_postings.js'

class Dashboard extends Component {

    //....lots of other functionality already built here.

    componentDidMount() {
      axios.get(`${url}/api/postings`)
        .then(res => res.data)
        .then(
          (postingRecords) => {
            this.setState({
              postingData: postingRecords,
              postingOptions: postingRecords
            });
          },
          (error) => {
            this.setState({
              error
            })
          }
        )
    // primary purpose is to replace the existing api call above with Redux Store and fetchpostings action creator

        fetchpostings()
    }
}

function mapDispatchToProps(dispatch) {
   // return {actions: bindActionCreators({ fetchpostings }, dispatch)}
  return {
    fetchpostings: () => dispatch(fetchpostings())
  }
}

export default connect(null, mapDispatchToProps)(Dashboard);

- Evan Bates

Answer 1

当您在componentDidMount中调用fetchpostings()方法时，您没有派发您的action，而是调用了从actions/get_postings.js导入的方法，而不是将要派发的方法。

请尝试使用this.props.fetchpostings()代替。

您还没有将state绑定到props上，您需要这样做。

- HMR

---

这是一个关键点。调用从actions/get_postings.js导入的方法仍将调用该操作方法，但不会发生太多事情（无论如何，因为它没有被分派，所以减速器也没有接收到分派的操作）。我完全忘记了这一点，并浪费了很多时间，直到看到HMR的答案。 - DMill