如何在页面加载时调度 redux 操作以在 useEffect 中加载数据 [英] How to dispatch an redux action to load data inside useEffect on page load
问题描述
我正在尝试将 redux 集成到现有的 React 应用程序中.我正在学习redux.我正在使用钩子.在互联网上有很多使用类组件的例子.我找不到如何使用功能组件实现此目的的示例.
下面的代码不会抛出错误.但是，useEffect 中的动作没有被调用.该代码不产生任何输出.我想知道这个电话是否正确.有什么帮助吗?
Index.js
const store = createStore(rubricReducer, applyMiddleware(thunk));ReactDOM.render(<BrowserRouter basename={baseUrl}><提供者商店={商店} ><应用程序/></提供者></BrowserRouter>,根元素);Rubrics.tsx
const mapStateToProps = state =>({评分细则:state.rubrics.items，加载:state.rubrics.loading，错误:state.rubrics.error});const mapDispatchToProps = (调度) =>{返回 {getRubrics: () =>调度(fetchRubrics())};}const Rubrics = (props) =>{const { rubrics, loading, error } = props;useEffect(() => {props.dispatch(fetchRubrics());}, []);if (error) { return 错误！{error.message};}if (loading) { return <div>Loading...</div>;}返回 (<ul><React.Fragment>{rubrics.map(rubric => {返回 (<li key={rubric.id}>{rubric.title}</li>);})}</React.Fragment>)}导出默认连接(mapStateToProps, mapDispatchToProps)(Rubrics);
rubricActions.tsx:
导出函数 fetchRubrics() {返回调度 =>{调度(fetchRubricsBegin())；axios.get("api/Rubric/Index").then(响应 => {console.log('success: reading rubrics');dispatch(fetchRubricsSuccess(response.data));返回 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 = () =>({类型:FETCH_RUBRICS_BEGIN})const fetchRubricsSuccess= (rubrics) =>({类型:FETCH_RUBRICS_SUCCESS，有效载荷:{ rubrics}})const fetchRubricsFailure = (错误) =>({类型:FETCH_RUBRICS_FAILURE，有效载荷:{错误}})rubricReducer.tsx:
import {FETCH_RUBRICS_BEGIN，FETCH_RUBRICS_SUCCESS，FETCH_RUBRICS_FAILURE} 来自'../_actions/rubricActions';常量初始状态 = {标题: [],加载:假，错误:空};const rubricReducer = (state = initialState, action) =>{开关(动作.类型){案例 FETCH_RUBRICS_BEGIN:返回 {...状态，加载:真实，错误:空};案例 FETCH_RUBRICS_SUCCESS:返回 {...状态，加载:假，项目:action.payload.rubrics}案例 FETCH_RUBRICS_FAILURE:返回 {...状态，加载:假，错误:action.payload.error，项目: []};默认:返回状态；}}导出默认 rubricReducer；使用 hooks 由 react-redux 提供，从 v7.1.0 开始，现在可以不用 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.rubrics，加载:state.loading}));useEffect(() => {调度(fetchRubrics())；}， [派遣]);if (error) { return 错误！{error.message};}if (loading) { return <div>Loading...</div>;}返回 (<ul><React.Fragment>{rubrics.map(rubric => {返回 (<li key={rubric.id}>{rubric.title}</li>);})}</React.Fragment>)};
I am trying to integrate redux to an existing react application. I am learning redux. I am using hooks. In the internet there are many examples of using class components. I could not find an example how to achieve this with a function component.
The code below does not throw an error. But, the action inside useEffect is not called. The code does not produce any output. I wonder if the call is correct or not. Any help?
Index.js
const store = createStore(rubricReducer, applyMiddleware(thunk));
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<Provider store={store} > <App /> </Provider>
</BrowserRouter>,
rootElement);
Rubrics.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;
With the hooks provided by react-redux since v7.1.0, this can be now written without mapStateToProps and 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>
)
};
这篇关于如何在页面加载时调度 redux 操作以在 useEffect 中加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
