React Component 接收 Redux 状态但无法分派操作

Question

我想触发的动作自己起作用，轴请求起作用并且它从 api 检索数据。但是，当我尝试使用 connect 从组件运行它然后将其作为道具访问时，就像函数没有运行一样，redux 状态不会相应更新。

这就是我使用 connect 和我的 react 组件的方式（getChannels 是之前从 action js 文件导入的

const mapStateToProps = (state) => ({
  channels: state.Channels.channels,
})

export default connect(mapStateToProps,{ getChannels })(ChannelList)

这就是我调用组件内部函数的方式

componentDidMount(){

    this.props.getChannels
   
  }

当我将道具记录到控制台时，我得到了初始的 redux 状态和一个函数对象。

console log image

我已经尝试过不同的方式来调度操作，但我是新手，所以我无法确定为什么它不起作用。下面是我的动作文件

import axios from 'axios'

import { GET_CHANNELS } from "./types";


// GET CHANNELS

export const getChannels = () => (dispatch) => {

 
 axios
  .get('/TeamChat/RetrieveChannels')
  .then((res) => {
    console.log(res)
    dispatch({
      type: GET_CHANNELS,
      payload: res.data,
    });
  })
  .catch((err) => console.log(err));
};

下面是我的减速器

   import { GET_CHANNELS } from '../actions/types.js';


const initialState = {
  channels: ['channel 1'],
}


export default function (state = initialState,action) {
  switch(action.type) {

    case GET_CHANNELS:
      return {
        ...state,
        channels: action.payload
  };
    default:
      return state;

  }
}

非常感谢你帮助我...我一直在学习这个教程https://www.youtube.com/watch?v=BmL8iaLMnQ0&list=PLillGF-RfqbbRA-CIUxlxkUpbq0IFkX60&index=4&ab_channel=TraversyMedia，但我无法确定我在哪里犯了错误。

Answer 1

您需要调用该方法，也是 this.props.getChannels() 代替 this.props.getChannels

但一般来说，您应该在 2022 年使用 useSelector 和 useDispatch 挂钩。connect/mapStateToProps 是遗留的 api，仅为遗留 class 组件提供支持。如果您正在学习向您展示 connect 的教程，它可能还会向您展示其他过时的概念：现代 Redux 不使用 switch..case reducer，ACTION_TYPEs，hand-written action creator，不可变的 reducer 逻辑或 createStore 和 applyMiddleware。因此，现代 Redux 不太容易出现错误，更易于阅读并且只有 1/4 的代码。如果您的教程仍然显示这些过时的做法，请改用 the official Redux tutorial。

React Component 接收 Redux 状态但无法分派操作

React Component receives the Redux states but can't dispatch actions

action

dispatch

reactjs

redux