redux-reducer没有监听动作

Question

我的应用程序中有多个操作，而这个操作只是没有监听或被调用到下一步，即reducer。

动作文件

export const UPDATE_IMAGE_STATE = "UPDATE_IMAGE_STATE";
export const updateImageState = imageData => {
console.log(imageData)
return {
type: UPDATE_IMAGE_STATE,
imageData
}
}

注意，imageData负载只是一个带有两个字符串的对象。此外，它肯定能进入操作，因为它console.log注销得很好。

还原文件

import {
UPDATE_IMAGE_STATE
} from '../actions/image-action';
const profileReducer = (state=initState, action) => {
if (action.type === UPDATE_IMAGE_STATE) {
console.log(action)
return Object.assign({}, state, { 
image: { 
image: action.imageData.image,
imageUrl: action.imageData.imageUrl
} 
})
}
return state;
}
export default profileReducer;

注意，reducer中的console.log甚至没有启动。所以出于某种原因，它没有出现在那里，但你可以看到我已经导入了操作。

此外，我还有来自同一个文件的其他操作，转到相同的reducer文件。所以一切似乎都是相连的。

store.js文件

import {createStore, combineReducers, applyMiddleware} from 'redux';
import {reducer as formReducer} from 'redux-form';
import thunk from 'redux-thunk';
import profileReducer from './reducers/profile-reducer';
const rootReducer = combineReducers({
user: profileReducer,
form: formReducer
})
export const store = createStore(rootReducer,applyMiddleware(thunk));

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import {store} from './store';
import { Provider } from 'react-redux';

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

这是文件upload-image.jsx这是发出行动的地方

import React, { Component } from 'react';
import Axios from 'axios';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { updateImageState } from '../actions/image-action';
import { API_BASE_URL } from "../config";
class UploadIMage extends Component {
constructor(props) {
super(props)
this.state = { 
selectedFile: null,
}
}
// input select profile picture 
singleFileChangedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
})
}
singleFileUploadHandler = () => {
const data = new FormData();
if (this.state.selectedFile) {
data.append('image', this.state.selectedFile, this.state.selectedFile.name);
Axios.post( `${API_BASE_URL}/user/image-upload`, data, {
headers: {
'accept': 'application/json',
'Accept-Language': 'en-US, en;q=0.8',
'Content-Type': `multipart/form-data; boundary=${data._boundary}`
}
})
.then((res) => {
if (200 === res.status) {
if ( res.data.error ) {
if ('LIMIT_FILE_SIZE' === res.data.errer.code) {
alert('Max size: 2MB')
} else {
console.log(res.data);
alert(res.data.error)
}
} else {
// Success
let fileName = res.data;
// SEND TO STATE, DISPATCH ACTION ********************
updateImageState(fileName)
alert('File Uploaded');
}
}
})
.catch((err) => {
alert(err, 'red')
});
} else {
// if file not selected throw error
alert('Please upload file')
}
}
render() { 
return ( 
<div>
<div className="card border-light mb-3 mt-5" style={{ boxShadow: '0 5px 10px 2px rgba(195,192,192,.5)' }}>
<div className="card-header">
<h3 style={{ color: '#555', marginLeft: '12px' }}>Single Image Upload</h3>
<p className="text-muted" style={{ marginLeft: '12px' }}>Upload Size: 250px x 250px ( Max 2MB )</p>
</div>
<div className="card-body">
<p className="card-text">Please upload an image for your profile</p>
<input type="file" onChange={this.singleFileChangedHandler}/>
<div className="mt-5">
<button className="btn btn-info" onClick={this.singleFileUploadHandler}>Upload!</button>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {

}
}
const mapDispatchToProps = dispatch => {
return bindActionCreators({
updateImageState
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(UploadIMage);

这是我的github前端https://github.com/Sebastian-Russo/avybe-challenge-profile后端https://github.com/Sebastian-Russo/profile-app-server/tree/master/profiles

Answer 1

所以在最后几条关于调度的评论之后，我对调度有了更深入的了解。

一切都是相连的。但是，我直接要求采取行动。

错误(我在做什么(updateImageState((

对，(我应该做的(这个.props.updateImageState((