Javascript 反应调度操作不起任何作用

尝试从api获取应用程序的初始数据时出现问题

我的问题是，在操作中的

console.log（url）

之后，什么都没有发生。我在控制台中看到了url，但

getInitialRuns（）

中的其余代码似乎没有执行，至少不是我所期望的方式。我没有收到任何错误消息

当使用Postman时，我可以成功地从该API端点获得响应，因此API应该很好

我有如下操作：

function requestRuns(){
  console.log('request')
  return {
    type: 'getInitialRuns'
  }
}

export function getInitialRuns(){
  var url = 'http://localhost:32118/api/Runs';
  console.log(url);
  return dispatch => {
    dispatch(requestRuns())

    return fetch(url)
      .then(response => response.json().then(body => ({response, body})))
      .then(({response, body}) => {
        if(!response.ok){
          console.log('fail')
        }
        else{
          console.log('success')
        }
      })
  }

class RunList extends Component{
  constructor(props) {
    super(props)
  }

  componentWillMount(){
    getInitialRuns()
  }

  render() {
    const {runs, isFetching, error} = this.props

    return (
      <ul className="run-list">
              {runs.map((run) => 
                  <Run key={run.Id} id={run.Id} date={run.DateString} day={run.Day} distance={run.Distance} duration={run.DurationString} avgpace={run.AvgPaceString} calories={run.Calories}/>
              )}
          </ul>
    )
  }
}

RunList.propTypes = {
  isFetching: PropTypes.bool.isRequired,
  runs: PropTypes.instanceOf(Immutable.List),
  error: PropTypes.object
}

function mapStateToProps(state) {
 return{
   runs: state.runs,
   isFetching: state.isFetching,
   error: state.error
 }
}

export default connect(mapStateToProps)(RunList)

import { createStore, applyMiddleware } from 'redux';
import  {composeWithDevTools} from 'redux-devtools-extension';
import runs from './reducers/runs';
import thunk from 'redux-thunk';

export default createStore(runs,composeWithDevTools( applyMiddleware(thunk) ))

调用该操作的组件如下所示：

function requestRuns(){
  console.log('request')
  return {
    type: 'getInitialRuns'
  }
}

export function getInitialRuns(){
  var url = 'http://localhost:32118/api/Runs';
  console.log(url);
  return dispatch => {
    dispatch(requestRuns())

    return fetch(url)
      .then(response => response.json().then(body => ({response, body})))
      .then(({response, body}) => {
        if(!response.ok){
          console.log('fail')
        }
        else{
          console.log('success')
        }
      })
  }

class RunList extends Component{
  constructor(props) {
    super(props)
  }

  componentWillMount(){
    getInitialRuns()
  }

  render() {
    const {runs, isFetching, error} = this.props

    return (
      <ul className="run-list">
              {runs.map((run) => 
                  <Run key={run.Id} id={run.Id} date={run.DateString} day={run.Day} distance={run.Distance} duration={run.DurationString} avgpace={run.AvgPaceString} calories={run.Calories}/>
              )}
          </ul>
    )
  }
}

RunList.propTypes = {
  isFetching: PropTypes.bool.isRequired,
  runs: PropTypes.instanceOf(Immutable.List),
  error: PropTypes.object
}

function mapStateToProps(state) {
 return{
   runs: state.runs,
   isFetching: state.isFetching,
   error: state.error
 }
}

export default connect(mapStateToProps)(RunList)

import { createStore, applyMiddleware } from 'redux';
import  {composeWithDevTools} from 'redux-devtools-extension';
import runs from './reducers/runs';
import thunk from 'redux-thunk';

export default createStore(runs,composeWithDevTools( applyMiddleware(thunk) ))

这些是我的减速器

import Immutable from 'immutable'

let initialState = {
  runs: Immutable.List([]), 
  isFetching: false,
  error: undefined
};

export default (state = initialState, action) => {
  switch(action.type) {
    case 'addRun':
      return state.unshift(action.run)
    case 'deleteRun':
      return Object.assign({}, state, {
        runs: state.runs.filter((run) => run.Id !== action.id)
      })
    case 'getInitialRuns':
      console.log('initial')
      return Object.assign({}, state, {
        isFetching: true
      })
    case 'getInitialRunsSuccess':
    console.log('success')
      return Object.assign({}, state, {
        isFetching: false,
        runs: action.runs
      })
    case 'getInitialRunsFailure':
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error
      })
    default:
      return state
  }
}

---

如果希望Redux注意到任何状态更改，则应该返回一个新状态

您的减速机外壳应如下所示：

return {
  ...previousState,
  newValues
}

'addRun'

return state.unshift(action.run)

应该是

return {...state, runs: state.run.unshift(action.run) }

---

如果希望Redux注意到任何状态更改，则应该返回一个新状态

您的减速机外壳应如下所示：

return {
  ...previousState,
  newValues
}

'addRun'

return state.unshift(action.run)

应该是

return {...state, runs: state.run.unshift(action.run) }

---

为了在redux上分派操作，您应该提供一个

mapDispatchToProps

函数来

connect

。发件人：

（..）您可以定义一个名为mapDispatchToProps（）的函数，该函数接收dispatch（）方法并返回要注入到presentational组件中的回调道具

我看到您正在使用一些高级库，如Immutablejs。我建议 你从阅读开始，因为它会一步一步地引导你。在您熟悉基本的redux概念之前，请避免使用任何其他库

以下是一些我希望对你有用的笔记：（摘自）

注释

• 一个动作对象，它是将数据从应用程序发送到商店的信息有效负载。其形式如下：
  var ADD_TODO={ 类型：ADD_TODO， 文本：“构建我的第一个Redux应用” }

• 建议您使用大写字母命名操作类型，如

  ADD\u TODO

• dispatch

  接受操作对象（参见上面的示例）
• 建议使用动作创建者，它们是返回动作对象的函数。它使它们易于测试和移植
• 动作创建者通常用小写字母命名：

  addTodo（）

---

我希望这有点帮助

为了在redux上调度操作，您应该提供一个

mapDispatchToProps

函数来连接。发件人：

（..）您可以定义一个名为mapDispatchToProps（）的函数，该函数接收dispatch（）方法并返回要注入到presentational组件中的回调道具

我看到您正在使用一些高级库，如Immutablejs。我建议 你从阅读开始，因为它会一步一步地引导你。在您熟悉基本的redux概念之前，请避免使用任何其他库

以下是一些我希望对你有用的笔记：（摘自）

注释

• 一个动作对象，它是将数据从应用程序发送到商店的信息有效负载。其形式如下：
  var ADD_TODO={ 类型：ADD_TODO， 文本：“构建我的第一个Redux应用” }

• 建议您使用大写字母命名操作类型，如

  ADD\u TODO

• dispatch

  接受操作对象（参见上面的示例）
• 建议使用动作创建者，它们是返回动作对象的函数。它使它们易于测试和移植
• 动作创建者通常用小写字母命名：

  addTodo（）

---

我希望这有点帮助

函数getInitialRuns返回一个函数，因此调用它不会执行返回函数的任何内容。顺便说一句，我不确定执行它是否对你的应用有任何用处

还原器是同步的，所以如果您需要做任何异步的事情，您需要一个中间件，比如redux thunk或redux observable

流量应为：

状态->视图->操作->中间件->操作->还原器->状态并返回到视图

请看下面的文件

您还可以在egghead上享受精彩的免费课程：

---

在github上，您也会发现课程中有很多内容。

函数getInitialRuns返回一个函数，因此调用它不会执行返回函数的任何内容。顺便说一句，我不确定执行它是否对你的应用有任何用处

还原器是同步的，所以如果您需要做任何异步的事情，您需要一个中间件，比如redux thunk或redux observable

流量应为：

状态->视图->操作->中间件->操作->还原器->状态并返回到视图

请看下面的文件

您还可以在egghead上享受精彩的免费课程：

---

在github上，您也可以找到许多课程资料。

谢谢，我会记住这一点。我不明白这是如何阻止调用我的API的？我错过什么了吗？谢谢，我会记住的。我不明白这是如何阻止调用我的API的？我遗漏了什么吗？我需要的是地图。我还将考虑其他最佳实践。非常感谢。地图是我需要的。我还将考虑其他最佳实践。非常感谢。