代码之家 › 专栏 › 技术社区 › Shan Robertson

使用redux和thunk返回嵌套状态

redux-thunk redux reactjs javascript

Shan Robertson · 技术社区 · 7 年前

我对redux&thunk,并且一直在遵循教程来尝试理解,我正在设法将其应用到我的应用程序ok中。有一件事我不明白,那就是如何将根级别上的多个状态对象放入一个嵌套对象中。例如,现在我的状态如下所示:

{
  timeline: [Array] // My timeline data in an array of objects
  timelineHasErrored: false,
  timelineIsLoading: false
}

但我真正想要的是:

{
  timeline : {
    data: [Array] // My timeline data in an array of objects
    hasErrored: false,
    isLoading: false
  }
}

我真的不太确定如何嵌套这些,或者正确的方法是什么。下面是我的redux代码,它非常简单,所以我将全部发布。

减速器索引

import { combineReducers } from 'redux'
import { timeline, timelineHasErrored, timelineIsLoading } from './timeline'

export default combineReducers({
    timeline, timelineHasErrored, timelineIsLoading
});

时间线缩减器

import { TIMELINE_HAS_ERRORED, TIMELINE_IS_LOADING, TIMELINE_FETCH_DATA_SUCCESS } from '../constants/action-types.js'

export function timelineHasErrored(state = false, action) {
  switch (action.type) {
    case TIMELINE_HAS_ERRORED:
      return action.hasErrored;
    default:
      return state;
  }
}

export function timelineIsLoading(state = false, action) {
  switch (action.type) {
    case TIMELINE_IS_LOADING:
      return action.isLoading;
    default:
      return state;
  }
}

export function timeline(state = [], action) {
  switch (action.type) {
    case TIMELINE_FETCH_DATA_SUCCESS:
      return action.timeline;
    default:
      return state;
  }
}

行动

import { TIMELINE_HAS_ERRORED, TIMELINE_IS_LOADING, TIMELINE_FETCH_DATA_SUCCESS } from '../constants/action-types.js'
import api from '../services/api'

export function timelineHasErrored(bool) {
  return {
    type : TIMELINE_HAS_ERRORED,
    hasErrored : bool
  }
}

export function timelineIsLoading(bool) {
  return {
    type : TIMELINE_IS_LOADING,
    isLoading : bool
  }
}

export function timelineFetchDataSuccess(timeline) {
  return {
    type : TIMELINE_FETCH_DATA_SUCCESS,
    timeline
  }
}

export function timelineFetchData() {
  return dispatch => {
    dispatch( timelineIsLoading(true) )

    api.getTracks().then(
      res => {
        dispatch( timelineIsLoading(false) )
        dispatch( timelineFetchDataSuccess(res.body) )
      },
      err => {
        dispatch( timelineIsLoading(false) )
        dispatch( timelineHasErrored(true) )
      }
    )
  }
}

然后在我的反应组件中,我按照我想要的方式格式化对象。。。但我认为最好将其嵌套在实际状态中,这样如果情况发生变化,我就不会为自己创造额外的工作

// Redux State
const mapStateToProps = (state) => {    
  const obj = {
    timeline : {
      data : state.timeline,
      hasErrored: state.tracksHasErrored,
      isLoading: state.tracksIsLoading
    }
  }

  return obj
}

// Redux Dispatch
const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: () => dispatch( timelineFetchData() )
  }
}

如果有人有任何提示或更正给我带上它们,我正在努力掌握redux,谢谢!

1 回复 | 直到 7 年前

Anthony 7 年前

您的时间线缩减器非常小,因此您可以将其作为单个缩减器,如下所示:

const initialState = {
    data: [],
    hasErrored: false,
    isLoading: false
};

export function timeline(state = initialState, action) {
  switch (action.type) {
    case TIMELINE_HAS_ERRORED:
      return {
         ...state,
         hasErrored: action.hasErrored
      };

    case TIMELINE_IS_LOADING:
      return {
         ...state,
         isLoading: action.isLoading
      };

    case TIMELINE_FETCH_DATA_SUCCESS:
      return {
         ...state,
         data: action.timeline
      };

    default:
      return state;
  }
}

那你就不用打电话了 combineReducers() ,除非您有其他减速器。