了解 React 中的 Redux答案

【问题标题】：Knowing Redux in React了解 React 中的 Redux
【发布时间】：2019-08-01 11:03:45
【问题描述】：

我的减速器如下所示

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'Hello': {
            console.log('hello');
        }
        default: return state
    }
}

我想将action 与reducer 分开。我想将它从另一个文件导入reducer。我该怎么做？

另一个问题

我有一个submit 按钮，如下所示。

<div onClick={this.handleSubmit}>Submit</div>

点击提交按钮时我正在调用下面的函数。

handleSubmit = event => {
    this.props.dispatch( { type: 'Hello' } );
  }

这里的type 是什么？我为什么要使用它？它在 reducer/actions 内部做什么？

【问题讨论】：

"我想将action 与reducer 分开。我想将它从另一个文件导入reducer。" action 是一个参数。你如何想象你会从另一个文件中导入它。请说清楚。也请避免一次问多个问题。
谢谢@YuryTarabanko，可以导入吗？
是否可以导入参数？嗯，不。我不确定你是什么意思。请想出你想要的某种伪javascript。

标签： reactjs redux react-redux

【解决方案1】：

动作类型是一个简单描述动作类型的字符串。它们通常存储为常量或收集在枚举中以帮助减少拼写错误。

export const Actions = {

  GET_USER_DETAILS_NAME: 'NAME',
  GET_USER_DETAILS_AGE: 'AGE',
  GET_USER_DETAILS_LOCATION: 'LOCATION',

  // more...
};

获取名为 Bob 的用户的操作可能如下所示

{
   type: 'NAME',
   payload: 'Bob'
}

Reducers 指定应用程序的状态如何更改以响应发送到商店的操作。

function getUserDetails(state = initialState, action) {
  switch (action.type) {
    case NAME:
      return Object.assign({}, state, action.payload)
    case AGE:
      return Object.assign({}, state, action.payload)
    case LOCATION:
      return Object.assign({}, state, action.payload)
    default:
      return state
  }
}

【讨论】：