理解Redux Redux减速器和MapstateToProps

Question

我很难理解redux状态是如何根据动作有效负载和还原器函数分配状态对象的。下面是我的示例代码。我在不同的部分做了笔记并提出了问题，但总的来说，这些是我的问题：

• 为什么下面的备选方案2不起作用？
• 为什么我必须使用state.competitions而不是state.items将我的状态映射到我的state.competitions道具
• 任何资源都可以很好地掌握连接和映射函数的工作方式。我已经浏览了官方文档并进行了一些googling搜索，但也许有人提供了一个参考，他们发现这些引用更容易理解映射状态和分派的所有不同选项和方法。

我的行动守则：

function getAll() {
    return dispatch => {
        dispatch(request());

        myService.getAll()
            .then(
                competitions => dispatch(success(competitions)),
                error => dispatch(failure(error))
            );
    };

    function request() { return { type: constants.GETALL_REQUEST } }
    function success(competitions) { return {type: constants.GETALL_SUCCESS, competitions}}
    function failure(error) { return {type: constants.GETALL_FAILURE, error}} 
}

我的减速机代码：

import { constants } from '../_constants';

const initialState = {items: [], loading: false, selected: null}

export function competitions(state = initialState, action) {
  switch (action.type) {
    case constants.GETALL_REQUEST:
      return {
        loading: true
      };
    case constants.GETALL_SUCCESS:
          console.log("the action value: ", action)
      return {
        items: action.competitions
      };
    case constants.GETALL_FAILURE:
          console.log("the failed action value: ", action)
      return { 
        error: action.error
      };
    default:
      return state
  }
}

在我的组件中，我有一个mapStateToProp函数，通过它来连接。第一个不起作用。为什么？

备选方案1-不工作

function mapStateToProps(state) {
    const { selected, ...competitions } = state.competitions;

    return {
        competitionList: competitions,
        isLoading: state.loading
    };
}

export default connect(mapStateToProps)(Dashboard);

这个方法可以工作，但是我希望competitionList变量有返回的items数组，而不是整个competition: state.competitions.items对象，所以我尝试执行类似于这个competition: state.competitions.items的操作，但是它会引发一个错误。

选项2-部分工作(我只想分配竞争项目)

const mapStateToProps = (state) => ({
    competitionList: state.competitions,
    isLoading: state.loading
});


export default connect(mapStateToProps)(Dashboard);

我做不到：

const { competitionList } = this.props;

{competitionList.map(competition =>
     <tr key={competition.competitionId}>
        <td>{competition.competitionName}</td>
     </tr>
 )}

我必须做：

const { competitionList } = this.props;

{competitionList.items.map(competition =>
     <tr key={competition.competitionId}>
        <td>{competition.competitionName}</td>
     </tr>
 )}

Answer 1

我认为你缺少的一点是，当你组合你的减速器时，每个减速器都会有一个键，因为它们是物体。

在合并减速器的文件中，可能有这样的内容：

​

import { combineReducers } from 'redux'
import todos from './todos'
import competitions from './competitions'

export default combineReducers({
  todos,
  competitions
})

​

在那之后，你的状态会是这样的：

​

{
  todos:{},
  competitions:{
    items: [],
    loading: false,
    selected: null
  }

}

​

解释说我认为一切都会更容易。

选项1-不工作：它不能工作，因为在competitions状态中没有competitions属性。即使您已经使用了，也不应该在它之前使用...。如果将competitions替换为items，它就会正常工作，因为items位于competitions状态内：

​

function mapStateToProps(state) {
    const { selected, items } = state.competitions;

    return {
        competitionList: items,
        isLoading: state.loading
    };
}

export default connect(mapStateToProps)(Dashboard);

​

或者我们可以改进它，使它更短：

​

function mapStateToProps(state) {
    const { selected, items } = state.competitions;

    return {
        items,
        selected
        isLoading: state.loading
    };
}

export default connect(mapStateToProps)(Dashboard);

​

这样做，您可以使用代码的这一部分：

​

const { items } = this.props;

{items.map(competition =>
   <tr key={competition.competitionId}>
      <td>{competition.competitionName}</td>
   </tr>
 )}

​

我想指出的另一点是，您的isLoading变量可能也不起作用，因为您试图直接从状态读取它，而不是从状态中的减速器读取它。

编辑：，我漏掉了另一点。你的还原器总是必须返回整个状态，而不仅仅是它的一个属性。

​

import { constants } from '../_constants';

const initialState = {items: [], loading: false, selected: null, error: null}

export function competitions(state = initialState, action) {
  switch (action.type) {
case constants.GETALL_REQUEST:
  /*return {
    loading: true
  };*/
  //returning that I will overwrite your competition state with this object.
  

  // this will keep all the competition state and will gerenate a new object changing only the loading attribute
  return {
    ...state,
    loading:true
}
case constants.GETALL_SUCCESS:
      console.log("the action value: ", action)
  return {
    ...state,
    items: action.competitions
  };
case constants.GETALL_FAILURE:
      console.log("the failed action value: ", action)
  return { 
    ...state,
    error: action.error
  };
default:
  return state
  }
}

​