Question

无论我做什么，我都无法摆脱错误。我经常重写动作，但错误仍然存在。我还在createstore的顶部写了thunk。如果您能支持我一点就好。

我的动作，这里没有什么特别的，只是调用来吸引我的玩家

import fetch from "cross-fetch"

export const SET_PLAYERS = "setplayers"
export const setPlayers = players => {
  return{
    type: "setplayers",
    players
  }
}

export const fetchPlayers = () => (dispatch, getState) => {
  return fetch("http://localhost:4444/api/players")
    .then(response => response.json())
    .then(players => {
      dispatch(setPlayers(players))
    }).catch(err => {
      console.log("Could not fetch assortments" , err)
    })
}

组件，目前只有一个虚拟对象来调用操作：

import React from "react"
import PropTypes from "prop-types"
import { fetchPlayers } from "./action"
import { connect } from "react-redux"
import EnhancedTable from "../components/list/List"
import getPlayers from "./reducer"


class PlayerTable extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
    }
  }

  componentDidMount(){
    this.props.fetchPlayers()
  }



  render() {
    console.log("#######", this.props.players)
    return (
      <EnhancedTable />
    )
  }
}

PlayerTable.propTypes = {
  classes: PropTypes.object.isRequired,
}

const mapStateToProps = state => ({
  players: getPlayers(state)
})

export default connect(mapStateToProps, { fetchPlayers })(PlayerTable)

减速器

import { SET_PLAYERS } from "./action"

const setPlayers = (state={}, action) => {
  console.log("ACTION", action)
  switch (action.type) {
  case SET_PLAYERS:
    return {...state, players: action.players}
  default:
    return state
  }
}
export default setPlayers

export const getPlayers = state => ([])

CombinedReducers

import { combineReducers } from "redux"
import { reducer as formReducer } from "redux-form"
import  showProgressbar  from "../components/progressbar/reducer"
import  showSnackBar from "../components/snackbar/reducer"
import  setPlayers from "../player/reducer"

export default combineReducers({
  form: formReducer,
  showProgressbar,
  showSnackBar,
  setPlayers
})

CreateStore

import App from "./App"
import React from "react"
import rootReducer from "./reducers"
import thunk from "redux-thunk"
import { render } from "react-dom"
import { createStore, applyMiddleware, compose } from "redux"
import { Provider } from "react-redux"
import { createLogger } from "redux-logger"

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
))

render(
  <Provider store={store}>
    <App />
  </Provider>,
  /* eslint-disable*/
  document.getElementById("root")
  /* eslint-enable */
)

Answer 1

您已经正确定义了mapStateToProps，但是对于mapDispatchToProps的第二个参数，您是否不需要对connect()做同样的事情？

const mapStateToProps = state => ({
  players: getPlayers(state)
})

const mapDispatchToProps = dispatch => ({
  fetchPlayers() {
    dispatch(fetchPlayers())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(PlayerTable)

Action.type未定义的Redux

1 个答案: