reactjs - 如何在页面加载时调度 redux 操作以在 useEffect 中加载数据
问题描述
我正在尝试将 redux 集成到现有的反应应用程序中。我正在学习redux。我正在使用钩子。在互联网上有很多使用类组件的例子。我找不到如何使用功能组件实现此目的的示例。
下面的代码不会引发错误。但是,里面的动作useEffect
没有被调用。该代码不产生任何输出。我想知道电话是否正确。有什么帮助吗?
索引.js
const store = createStore(rubricReducer, applyMiddleware(thunk));
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<Provider store={store} > <App /> </Provider>
</BrowserRouter>,
rootElement);
量规.tsx
const mapStateToProps = state => ({
rubrics: state.rubrics.items,
loading: state.rubrics.loading,
error: state.rubrics.error
});
const mapDispatchToProps = (dispatch) => {
return {
getRubrics: () => dispatch(fetchRubrics())
};
}
const Rubrics = (props) => {
const { rubrics, loading, error } = props;
useEffect(() => {
props.dispatch(fetchRubrics());
}, []);
if (error) { return <div>Error! {error.message}</div>; }
if (loading) { return <div>Loading...</div>; }
return (
<ul>
<React.Fragment>
{rubrics.map(rubric => {
return (
<li key={rubric.id}>{rubric.title}</li>
);
})}
</React.Fragment>
</ul>
)
}
export default connect(mapStateToProps, mapDispatchToProps)(Rubrics);
rubricActions.tsx:
export function fetchRubrics() {
return dispatch => {
dispatch(fetchRubricsBegin());
axios.get("api/Rubric/Index")
.then(response => {
console.log('success: reading rubrics');
dispatch(fetchRubricsSuccess(response.data));
return response.data;
})
.catch(error => { fetchRubricsFailure(error) });
};
}
export const FETCH_RUBRICS_BEGIN = "FETCH_RUBRICS_BEGIN";
export const FETCH_RUBRICS_SUCCESS = "FETCH_RUBRICS_SUCCESS";
export const FETCH_RUBRICS_FAILURE = "FETCH_RUBRICS_FAILURE";
const fetchRubricsBegin = () => ({
type: FETCH_RUBRICS_BEGIN
})
const fetchRubricsSuccess= (rubrics) => ({
type: FETCH_RUBRICS_SUCCESS,
payload: { rubrics}
})
const fetchRubricsFailure = (error) => ({
type: FETCH_RUBRICS_FAILURE,
payload: {error}
})
rubricReducer.tsx:
import {
FETCH_RUBRICS_BEGIN,
FETCH_RUBRICS_SUCCESS,
FETCH_RUBRICS_FAILURE
} from '../_actions/rubricActions';
const initialState = {
rubrics: [],
loading: false,
error: null
};
const rubricReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_RUBRICS_BEGIN:
return {
...state,
loading: true,
error: null
};
case FETCH_RUBRICS_SUCCESS:
return {
...state,
loading: false,
items: action.payload.rubrics
}
case FETCH_RUBRICS_FAILURE:
return {
...state,
loading: false,
error: action.payload.error,
items: []
};
default:
return state;
}
}
export default rubricReducer;
解决方案
使用react-redux自 v7.1.0 以来提供的钩子,现在可以在没有and的情况下编写它。mapStateToProps
mapDispatchToProps
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
const Rubrics = () => {
const dispatch = useDispatch();
const { rubrics, loading, error } = useSelector(
state => ({
error: state.error,
rubrics: state.rubrics,
loading: state.loading
})
);
useEffect(() => {
dispatch(fetchRubrics());
}, [dispatch]);
if (error) { return <div>Error! {error.message}</div>; }
if (loading) { return <div>Loading...</div>; }
return (
<ul>
<React.Fragment>
{rubrics.map(rubric => {
return (
<li key={rubric.id}>{rubric.title}</li>
);
})}
</React.Fragment>
</ul>
)
};
推荐阅读
- pycharm - Ubuntu18.04 上的 Pycharm - 主目录中以前版本的隐藏文件夹
- javascript - 向文件添加增量
- html - 如何通过 html 代码同时发送两个请求?
- javascript - 每个地区的人都一样的Javascript倒计时
- html - 如何正确设置表格中 tbody 元素的背景颜色?
- android - Flutter WebView App 不响应我的触摸事件
- javascript - 当我更改状态时,为什么排序不能正常工作?
- angular - Why does select dropdown show empty default in Angular 8 after http call?
- python - 如何将张量对象传递给接受数据类型为 uint 的图像的函数
- python-3.x - Discord.py 发送空白 .txt 文件