Реагируйте на избыточность: несколько действий с mapStatetoProps и общим редуктором - PullRequest
0 голосов
/ 25 января 2019

Как mapStatetoProps получает несколько действий отправки?

Я отправляю несколько действий и связываю их с избыточностью.Но проблема в том, что 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?

1 Ответ

0 голосов
/ 25 января 2019

Хорошо, так что это обходной путь, который я использовал, хотя это не совсем отвечает на заданный вопрос:

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;
    }
}
...