redux处理获取响应数据并更新存储

问题描述

我正在尝试迁移到redux-thunk，这里有几个问题。

以前，我已经获取了保存在状态中的响应数据，并使用该状态使用过滤器将其他状态保存在应用中。

loadMeetingRoomData = async () => {

        try {
            const getMeetingRoomData = await fetch(URL,{ headers: myHeaders });

            const responseJson = await getMeetingRoomData.json();


            if (responseJson.length === 0) {
                this.setState({
                    meetingRoomStatus: false,})
            } else {
                this.setState({
                    meetingRoomData: responseJson,});

                const inProgressMeeting = responseJson.filter(obj => {
                    return obj.Status === INPROGRESS_CODE
                });

                this.setState({
                    meetingRoomInProgressCount: inProgressMeeting.length,});

                const upcomingMeeting = responseJson.filter(obj => {
                    return obj.Status === UPCOMING_CODE_MORE_THAN_30_MIN || obj.Status === UPCOMING_CODE_LESS_THAN_30_MIN;
                });

                this.setState({
                    meetingRoomUpcomingCount: upcomingMeeting.length,})

                const finishedMeeting = responseJson.filter(obj => {
                    return obj.Status === FINISHED_CODE
                })
                this.setState({
                    meetingRoomFinishedCount: finishedMeeting.length,})
            }

        }
        catch (err) {
            console.log(new Error(err));
        }
    }

下面是代码，我的问题是我应该在哪里过滤响应 更新先前代码中的新三个状态（MeetingRoomInProgressCount，meetingRoomUpComingCount，meetingRoomFinished）

我是否必须使用mapDispatchToProps在组件文件中分派它？ 使用中间件更新商店，还是在reducer内过滤？

@Action Creator
export const fetchMeetingRoom = () => {
    return function(dispatch){
        return fetch(URL,{ headers: myHeaders })
                .then(response => response.json())
                .then(json =>
                    dispatch({ type: 'FETCH_MEETINGROOM_SUCCESS',payload : json})
                )
    }
}

export default function reducer( state = initialState,action){
    switch(action.type) {
         case FETCH_MEETINGROOM_SUCCESS : 
            let value = action.payload;
            if(value.length === 0){ return {...state,meetingRoomStatus :false,}}
            else{
                return {...state,isLoading : false,meetingRoomData : action.payload}
            }

        default : 
            return state;
     }
}

解决方法

我在项目中使用这种结构

动作：

import { TYPE_VARS } from "./type";

export const func_name = () => (dispatch) => {
  return fetch(URL,{
    method: "GET",headers: {
      "Content-Type": "application/json",}
  })
    .then((res) => res.json())
    .then((data) => {
      dispatch({
        type: TYPE_VARS,payload: data,});
      return data;
    })
    .catch((err) => console.log(err.message));
};

减速器：

import { TYPE_VARS } from "../actions/type";

const initialState = {
  my_state: {},};

export default function (state = initialState,action) {
  const { type,payload } = action;

  switch (type) {
    case TYPE_VARS:
      return {
        ...state,my_state: payload,};

    default:
      return state;
  }
}

组件：

// call action where do you need
func_name()







const mapStateToProps = state => ({
   my_state: state.reducerFileName.my_state
})

export default connect(mapStateToProps,{ func_name })(ComponentName)