React redux：使用 mapStatetoProps 的多个操作，以及一个通用的 reducer答案

【问题标题】：React redux: Multiple actions with mapStatetoProps, and a common reducerReact redux：使用 mapStatetoProps 的多个操作，以及一个通用的 reducer
【发布时间】：2019-01-25 11:03:04
【问题描述】：

mapStatetoProps 如何接收多个 dispatch action ？

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

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

还有reducer：

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 将动作映射为特定的道具名称？

【问题讨论】：

您可以将值分配给具有不同属性的状态（例如 Fetch post -> return Object.assign({}, state, { post: {.. post data }}); 并从 mapStatetoProps 获取相同的值。
我不明白你的意思@ShubhamKhatri。我已经提供了所需的一切，包括减速器。
@SelvaTS - 你的意思是我应该把它放在减速器的'FETCH_POSTS'中？然后我对 mapStatetoProps 做了哪些更改
我的意思是fetchEvents 的动作是什么样的，你是不是也从那里调用 FETCH_POSTS
@ShivanshJagga我已经更新了代码。请参考更新后的沙盒。

标签： reactjs api redux react-redux

【解决方案1】：

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

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

在 reducer 中：

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

【讨论】：