时间戳

首页 > 解决方案 > 动作不调用减速器

reactjs - 动作不调用减速器

问题描述

我正在使用 react-redux，问题是我的操作之一没有发送到 reducer，这是我的代码：

Actions.js：

export const getRooms = () => {
  console.log('reach action')
  const config = {
    headers: {
      Authorization: localStorage.getItem('lets_chat_token')
    }
  }
  return dispatch => {
    console.log('in dispatch')
    return axios
      .get(`/api/rooms`, config)
      .then(data =>
        dispatch({
          type: 'GET_ROOMS',
          payload: data.data.data
        })
      )
      .catch(err =>
        dispatch({
          type: 'ERROR',
          payload: err
        })
      )
  }
}

我在反应组件中调用此操作：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getRooms } from '../../Redux/Actions'

import './Connections-list.css'

class ConnectionsList extends Component {
  handleRooms = () => {
    getRooms()
  }

  render() {
    return (
      <div className="connections-list-container">
        <div className="connections-list-header">
          <i className="fas fa-users" onClick={this.handleRooms}></i>
          <i className="fas fa-user-friends"> </i>
        </div>
        <div className="connections-list-list">aasa</div>
      </div>
    )
  }
}

export default connect(
  null,
  { getRooms }
)(ConnectionsList)

问题是第一个日志出现在 getRooms() 函数中：

console.log('reach action')

但在那之后什么也没有发生。

注意：我使用的是 redux-thunk。我还有其他完美的动作。

标签： reactjsreduxaxios

解决方案

你需要绑定你的 redux 动作，然后在 props 中获取它。下面是修改后的代码。 

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' // bind redux action with dispatch
import { getRooms } from '../../Redux/Actions'

import './Connections-list.css'

class ConnectionsList extends Component {
  handleRooms = () => {
    const { getRooms } = this.props //get the redux action from props
    getRooms()
  }

  render() {
    return (
      <div className="connections-list-container">
        <div className="connections-list-header">
          <i className="fas fa-users" onClick={this.handleRooms}></i>
          <i className="fas fa-user-friends"> </i>
        </div>
        <div className="connections-list-list">aasa</div>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators({getRooms}, dispatch)
}

export default connect(
  null,
  mapDispatchToProps
)(ConnectionsList)

推荐阅读