我有这些文件,不知怎的,当我发送东西时,它总是返回reducer的默认情况。
这是我第一次使用redux / thunk,我正在学习本教程:https://www.youtube.com/watch?v=nrg7zhgJd4w,当他这样做时,它可以工作..
请查看我的代码:
反应成分:
import React, { Component } from 'react';
import './App.css';
import Request from 'request';
import { connect } from 'react-redux'
import * as OperationsActions from './actions/operationsReducerActions'
//import { Content, FilterSelect, ListItem, Searchbar, Sidebar} from './components/index.js'
function mapStateToProps(state){
return {
operations : state.operations
}
}
class App extends Component {
constructor(props){
super(props);
}
componentDidMount(){
this.props.dispatch( OperationsActions.getOperations() );
}
render() {
console.log(this.props)
return(
<div>{this.props.operations.operations[0].text}</div>
)
}
}
export default connect(mapStateToProps)(App)
动作文件:
import Request from 'request';
export function getOperations(){
Request('http://localhost:8000/client/REQUEST_OPERATIONS', (error, response, data) => {
if(!error){
return {type : 'FETCH_OPERATIONS_SUCCES', payload : data};
}
else {
return {type : 'FETCH_OPERATIONS_REJECTED', payload : error}
}
});
}
减速器:
export default function reducer(state={
operations : [{
text : '',
reqArgument : '',
filters : [],
url : ''
}],
fetching : false,
fetched : false,
error : null
}, action) {
switch(action.type){
case 'FETCH_OPERATIONS':{
return {...state, fetching : true }
}
case 'FETCH_OPERATIONS_REJECTED':{
return {...state, fetching : false, error : action.payload}
}
case 'FETCH_OPERATIONS_SUCCES':{
return {...state, fetched : true, fetching : false, operations : action.payload }
}
default : {
return {...state}
}
}
}
和我的商店:
从'redux'
导入{applyMiddleware,createStore} import logger from 'redux-logger'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import reducer from './reducers'
const middleware = applyMiddleware(promise, thunk, logger)
export default createStore(reducer, middleware)
答案 0 :(得分:2)
class App extends Component {
...
componentDidMount(){
this.props.dispatch(OperationsActions.getOperations());
}
...
}
调用OperationsActions.getOperations()
将返回undefined
- 它不会显式返回任何内容。因此,您的reducer将收到undefined
作为其action
参数。然后switch
将运行其默认情况。
您的getOperations
操作应转换为thunk。这是一个例子:
function getOperationsThunk() {
return function (dispatch) {
Request('http://foo.bar', (err, data) => {
if (err) { dispatch(errorAction(err)); }
else { dispatch(successAction(data)); }
});
};
}
errorAction
和successAction
函数将从异步请求接收数据并创建要调度的操作对象。