Question

mapStatetoProps如何接收多个调度动作？

我正在调度多个动作，并将它们与redux连接起来。但是问题在于this.props.pageData中提到的mapStatetoProps 仅接收第二个操作的数据。

function mapStateToProps(state){
  return {
      pageData: state.posts.arr
  };
};

function loadData(store){
  return Promise.all([
    store.dispatch(fetchNews() ),
    store.dispatch(fetchEvents() )
  ])
}

export default {
  loadData,
  component: connect(mapStateToProps, { fetchNews , fetchEvents})(HomePage)
};

和减速器：

export default function(state = {
    posts: null
}, action){
    switch(action.type){
        case 'FETCH_POSTS': 
            return {...state, arr: action.payload || false};
        default:
            return state;
    }
}

操作如下所示（这是一个API调用）：

export const fetchNews = () => async (dispatch, getState, api) => {

    await api.get('/myAPI').then(response => {
        dispatch({
            type: 'FETCH_POSTS',
            payload: response.data
        })
    }).catch((err) => {
        console.log('actions/index.js error', err);
    })

};

如何使用mapStatetoProps将动作映射为特定的道具名称？

Answer 1

好的，这是我使用的解决方法，尽管它不能完全回答所问的问题：

function mapStateToProps(state){
  return {
      newsData: state.posts.news,
      eventsData: state.posts.events
  };
};

在减速器中：

export default function(state = {
    posts: null
}, action){
    switch(action.type){
        case 'FETCH_NEWS': 
            return {...state, news: action.payload || false};
        case 'FETCH_EVENTS': 
            return {...state, events: action.payload || false};
        default:
            return state;
    }
}

React Redux：使用mapStatetoProps和一个通用的reducer的多个动作

1 个答案: