[英]Redux action not triggering reducers
I wired up my react application with a Redux store, added an api action to gather data from my backend including middleware redux-promise. 我将我的React应用程序与Redux商店连接起来,添加了一个api操作来从后端(包括中间件redux-promise)收集数据。 Most everything seems to work as I can see my store in the React web editor along with the combine reducer keys. 就像我可以在React Web编辑器中看到我的商店以及Combine Reducer键一样,大多数事情似乎都可以正常工作。 When I have my action called, it works and console logs the completed promise. 当我调用动作时,它会起作用,并且控制台会记录已完成的承诺。 However, my reducers never run. 但是,我的减速器从未运行过。 I thought it was an issue with my dispatch on the main container, but I've tried every way that I can think of at this point - regular dispatch() and bindActionCreators. 我以为这是我在主容器上进行分派的问题,但是我已经尝试了所有可以想到的方法-常规dispatch()和bindActionCreators。 HELP! 救命!
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'));`
import { combineReducers } from 'redux';
import ReducerGetPostings from './reducer_get_postings'
const rootReducer = combineReducers({
postingRecords: ReducerGetPostings
})
export default rootReducer;
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;
}
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
};
}
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);
You are not dispatching your action, when you call fetchpostings()
in componentDidMount you are calling the method imported from actions/get_postings.js
, not the method that will dispatch. 您不是在分派动作, fetchpostings()
在componentDidMount中调用fetchpostings()
,是在调用从actions/get_postings.js
导入的方法,而不是将分派的方法。
Try this.props.fetchpostings()
instead. 请尝试this.props.fetchpostings()
。
You also did not bind state to props you need to do that as well. 您也没有将状态绑定到需要做的道具上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.