为什么不能在我的redux减速器中调用this.state?

时间:2019-10-24 11:29:16

标签: reactjs redux

我制作了一个可还原管理员的reducer,当我在她的reducer中调用它时,我希望它显示某些管理员,但我却无法定义。

我对redux还是很陌生,所以为我的错误道歉。 我试图包括所有相关文件夹:

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../store/actions';

class App extends Component {

  async componentDidMount() {

    fetch(constants.adminUrl + '/admins/data', {
      method: 'GET'
    }).then((res) => {
      return res.json()
    }).then(async (res) => {
      this.props.setAdminsInColumns(res.admins)
    }).catch((error) => {
      toast.error(error.message)
    })
  }


  render() {
    return (
        {/* SOME CODE */}
    );
  }
}

let app = connect(null, actions)(App);
export default app;

columnsReducer.js

import { FETCH_ADMINS } from '../actions/types'
import { Link } from 'react-router-dom'
import constants from '../../static/global/index'
import React from 'react';
import { toast } from 'react-toastify'

const initialState = {
  admins: [],
{
      Header: "Responsible",
      accessor: "responsibleAdmin",
      style: { textAlign: "center" },
//  Place where I want to fetch certain admins and get undefined
      Cell: props => <span>{props.value && this.state.admins.name ? this.state.admins.find(admin => admin.id === props.value).name : props.value}</span>
    }
}

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_ADMINS:
      return { ...state, admins: action.admins}
    default:
      return state
  }
}

index.js

import { FETCH_ADMINS } from "./types"

/**
* starts loader for setting admin
*/

export const setAdminsInColumns = (admins) => async dispatch => {
 dispatch({ type: FETCH_ADMINS, admins })
}

types.js

export const FETCH_ADMINS = 'fetch_admins'

当我console.log(action.admins)在columnsReducer.js文件的开关箱FETCH_ADMINS中时,我可以看到我想要的所有管理信息,有没有办法使columnsReducer.js文件中的状态为全局状态,所以我可以读了吗?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

在connect方法中使用mapStateToProps。像下面一样

let mapStateToProps = (state)=>{
 return {
    admins :[yourcolumnsReducer].admins
 }
}
let app = connect(mapStateToProps, actions)(App);

//您可以在组件内部使用this.props.admins

MapStateToProps reference