redux 处理获取响应数据和更新存储答案

【问题标题】：redux handling fetch response data and update storeredux 处理获取响应数据和更新存储
【发布时间】：2020-12-08 09:09:08
【问题描述】：

我正在尝试迁移到 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));
        }
    }

下面是代码，我的问题是我在哪里过滤reponseJson 更新之前代码中新增的三个状态（meetingRoomInProgressCount、meetingRoomUpComingCount、meetingRoomFinished）

我是否必须在组件文件中使用 mapDispatchToProps 或使用中间件更新 store ，还是在 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;
     }
}

【问题讨论】：

标签： reactjs react-native redux redux-thunk

【解决方案1】：

我在我的项目中使用这种结构

行动：

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)

【讨论】：