使用 redux 和 thunk 返回嵌套状态

Question

我对 redux 和 thunk 还很陌生，一直在按照教程尝试理解，并且正在设法将它应用到我的应用程序中。我不明白的一件事是如何将根级别的多个状态对象放入一个嵌套对象中。例如，现在我的状态看起来像：

{
  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 代码，它很简单所以我会 post 全部。

Reducers 索引

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，谢谢！

Answer 1

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

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()，除非你有其他减速器。

使用 redux 和 thunk 返回嵌套状态

returning nested state with redux and thunk

javascript

reactjs

redux

redux-thunk