为什么当我尝试使用 redux 控制台 state 并反应 js 时，我的操作结果数据是 null

Question

嗨开发人员我目前正在研究使用 redux 作为前端的反应 js，我想对我的示例项目实施 state 管理（Redux）。 我的后端我使用 laravel。 现在我已经设置了 Action、Services、Reducers。 当我尝试将道具 state 控制台记录到我的组件时，它显示我的操作数据响应是 null。

问题：动作数据响应仅为 null。

这是我的 MapState 和 mapDisPatch

const mapStateToProps = (state) => {
  return {
    filterChartRes: state.dashboard.filterChartRes,
  }
}

const mapDisPatchToProps = (dispatch) => {
  return {
    loadFilterChartData: (selectionRange) => dispatch(loadFilterChartData(selectionRange)),
  }
}

我的行动：

 export const loadFilterChartData = (selectionRange) => {
        return (dispatch) => {
            getFilterChartData(selectionRange).then((res) => {
                console.log(res)
                dispatch({ type: 'FILTER_CHART_RESPONSE', res })
            },
                error => {
                    dispatch({ type: 'FILTER_CHART_ERROR', error });
                }
            )
        }
     }

我的服务：

    export const getFilterChartData = (selectionRange) => {
    const http = new HttpService();
    //let filterData = selectionRange !== "" ? selectionRange : null;
    let url = "auth/filter_chart";
    return http.getData(url)
        .then(data => {
        return data;
    })
}

我的减速机：

    const initState = {
    filterChartRes: null,
    filterChartErr: null
};


const DashboardReducer = (state = initState, action) => {
    switch (action.type) {
        case 'FILTER_CHART_RESPONSE':
    
            return {
                ...state,
                filterChartRes: action.res.data
            }
        case 'FILTER_CHART_ERROR':
            return {
                ...state,
                filterChartErr: 'action.error'
            }
        default:
            return state
    }
}



export default DashboardReducer;

我的渲染：

 const {filterChartRes } = this.props

console.log(filterChartRes, "My Filter");

我的工作 Output：

后端 Controller：

public function filter_chart() {
       return 'Sample Data';
    }

希望有人帮助解决我的问题

Answer 1

要解决这个问题：

您必须调用 DidMount 中的道具

componentDidMount = () => {
    
    this.props.loadFilterChartData()
}