使用Redux-thunk处理异步操作的组件结构

Question

经过一番尝试和错误，我终于设法使动作创建者正常工作，并将所需的数据传递到我的redux存储中。 直到现在，我都像这个store.dispatch(fetchTest());一样“手动”分发它store.dispatch(fetchTest()); 但是，如果可以将这些数据用于组件，那就太好了。

这是我的动作创建者：

export const fetchTest = () => (dispatch) => {
    dispatch({
        type: 'FETCH_DATA_REQUEST',
        isFetching:true,
        error:null
  });
  return axios.get('http://localhost:3000/authors')
    .then(data => {
      dispatch({
            type: 'FETCH_DATA_SUCCESS',
            isFetching:false,
            data: data
      });
    })
    .catch(err => {
      dispatch({
            ype: 'FETCH_DATA_FAILURE',
            isFetching:false,
            error:err
      });
      console.error("Failure: ", err);
    });
};

这是我的减速器：

const initialState = {data:null,isFetching: false,error:null};
export const ThunkData = (state = initialState, action)=>{
    switch (action.type) {
        case 'FETCH_DATA_REQUEST':
        case 'FETCH_DATA_FAILURE':
        return { ...state, isFetching: action.isFetching, error: action.error };

        case 'FETCH_DATA_SUCCESS':
        return Object.assign({}, state, {data: action.data, isFetching: action.isFetching,
                 error: null });
        default:return state;

    }
};

到目前为止，使用store.dispatch(fetchTest());时一切正常store.dispatch(fetchTest()); 。

基于此示例，我尝试构建以下组件：

class asyncL extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      componentWillMount() {
                      this.props.fetchTest(this.props.thunkData)
                      // got an error here : "fetchTest is not a function"
                      }
                      render() {
                      if (this.props.isFetching) {
                            return console.log("fetching!")
        }else if (this.props.error) {
            return <div>ERROR {this.props.error}</div>
        }else {
            return <p>{ this.props.data }</p> 
        }
    }
}

            const mapStateToProps = (state) => {
                return {
                    isFetching: state.ThunkData.isFetching,
                    data: state.ThunkData.data.data,
                    error: state.ThunkData.error,
                };
            };


            const AsyncList = connect(mapStateToProps)(asyncL);
            export default AsyncList

它不起作用，在componentWillMount()以及其他地方可能有错误。

而且我的数据结构有点奇怪。 为了真正到达数据数组，我必须执行state.ThunkData.data.data 。 第一个数据对象充满了无用的内容，例如request ， headers等。

因此，我应该如何编写此组件，以便至少可以将Async数据传递到console.log中。

谢谢。

Answer 1

您还需要mapDispatchToProps 。

import { fetchTest } from './myFetchActionFileHere';
import { bindActionCreators } from 'redux';

function mapDispatchToProps(dispatch) {
  return {
    fetchTest: bindActionCreators(fetchTest, dispatch)
  };
}

const AsyncList = connect(mapStateToProps, mapDispatchToProps)(asyncL);
export default AsyncList

文档链接： http : //redux.js.org/docs/api/bindActionCreators.html