Question

经过一些试验和错误后，我终于设法让我的动作创建者正常工作并将我想要的数据传递到我的redux商店。到目前为止，我一直在手动调度它＃34;像这样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());时一切正常。

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

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

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

1 个答案: