Question

尝试从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) ))

这些是我的减速器

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
  }
}

Answer 1

要在redux上发送操作，您应该向mapDispatchToProps提供connect功能。来自redux docs：

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

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

我看到你正在使用像Immutablejs这样的高级库。我建议首先阅读the awesome redux documentation，因为它将逐步引导您。在您熟悉基本的redux概念之前，请避免使用任何其他库。

以下是我希望对您有用的一些注释:(它们取自redux docs）

备注

一个操作对象，从您的应用程序向商店发送数据的信息的有效负载。它是这种形式：

var ADD_TODO = { 类型：ADD_TODO，文字：'构建我的第一个Redux应用' }

建议您以大写字母命名行为类型，例如ADD_TODO。

dispatch接受一个操作对象（请参阅上面的示例）。

建议使用动作创建器，它们是返回动作对象的函数。 使它们易于测试和携带

动作创建者通常以小写命名：addTodo()。

我希望这有点帮助

Answer 2

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

你的减速机箱应该是这样的：

return {
  ...previousState,
  newValues
}

<强>＆＃39; addRun＆＃39;

return state.unshift(action.run)

应该是

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

Answer 3

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

Reducers是同步的，所以如果你需要做任何异步的事情，你需要一个中间件，比如redux-thunk或redux-observable。

流程应该是：

状态 - ＆gt;意见 - ＆gt;行动 - ＆gt;中间件 - ＆gt;行动 - ＆gt;减速器 - ＆gt;陈述并回到观点

请查看http://redux.js.org/docs/advanced/AsyncActions.html

上的文档

此外，您还可以享受有关egghead的优秀免费课程：

https://egghead.io/courses/getting-started-with-redux

https://egghead.io/courses/building-react-applications-with-idiomatic-redux

在github上你也会在课程上找到很多材料。

React调度操作不执行任何操作

3 个答案: