Question

所以我正在学习React-Redux。我试图找到一种方法，首先在加载时从数据库加载一个值，而不是从0开始。我已经编写了一个操作，它将触发我的节点文件上的端点并从我的mongo数据库中拉出来。这有效。然而，动作似乎永远不会到达减速器以实际更新商店。有人可以向我解释确保此操作可以识别存储的正确方法。

以下是操作的代码。请注意带有数字的console.log打印出我想要的内容。我从来没有看到它甚至达到的减速机中的日志。

export function setFooClicks(){
  console.log("in the set foo clicks action")
  var number = 0;
  //return function(dispatch){
    //console.log("in the return function")
    return axios.get('/clicks').then(result => {

      number = result.data

      console.log("The number of clicks is", number)
      //return number
      return{
        type: types.SETFOOCLICKS,
        totalFoo: result.data

      }

    }).catch((error) => {
      return console.log(error);
    })
  //} 


}

我正试图在顶级容器中抓住它，所以这里是代码。

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Foo from '../components/Foo'
import { incrementFoo, setFooClicks } from '../actions'



class FooContainer extends Component {
  componentDidMount(){
    setFooClicks();
  }
  render() {  

    return (
        <div>
      <Foo incrementFooAction={() => this.props.incrementFoo()} totalFoo={this.props.totalFoo}/>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    totalFoo: state.foo.totalFoo 
  }
}

export default connect(mapStateToProps, { incrementFoo,setFooClicks })(FooContainer)

正常的incrementFoo操作有效，但尝试将setFooClicks操作添加到组件中也不行。最后这里是reducer函数的代码。我所做的只是在开关块中添加一个案例。

export default function incrementFoo(state = initialState, action) {
  console.log("I am in the foo reducer")
  console.log(action.type)
  switch (action.type) {
    case INCREMENT:
        console.log(state.totalFoo);
      return {
        ...state,
        totalFoo: state.totalFoo + 1
      }
    case SETFOOCLICKS:
      console.log("in the SETFOOCLICKS reducer")
      return{
        ...state,
        totalFoo: action.totalFoo
      }  
    default:
      return state
  }
}

react-redux对减速器关系的作用

0 个答案: