reactjs - 为什么单击按钮时我的状态没有在 redux 中更新
问题描述
我正在尝试更新我的 redux 状态,但单击按钮时似乎没有更新。我有一个“团队”下拉菜单,当单击“添加团队”按钮时,它应该更新静态数据为“团队 1”和“团队 2”,但它不会更新。对于我对 redux 的新代码量表示歉意,并且不知道问题可能出在哪里。下面的代码:
Store.ts
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
/* FILE DEPENDENCIES */
import RootReducer from './rootReducer';
//Fix dev tools
const Store = createStore(RootReducer, composeWithDevTools(applyMiddleware(thunk)));
export type RootStore = ReturnType<typeof RootReducer>;
export default Store;
团队减速器.ts
import { Team } from '../Models/TeamsModels';
import { TeamsDispatchTypes, TEAMS_FAIL, TEAMS_LOADING, TEAMS_SUCCESS } from './Actions/TeamsActionTypes';
export interface IDefaultState {
loading: boolean;
teams?: Team[];
}
const defaultState: IDefaultState = {
loading: false,
};
const teamsReducer = (state: IDefaultState = defaultState, action: TeamsDispatchTypes): IDefaultState => {
switch (action.type) {
case TEAMS_FAIL:
return {
loading: false,
teams: state.teams,
};
case TEAMS_LOADING:
return {
loading: true,
teams: state.teams,
};
case TEAMS_SUCCESS:
return {
loading: false,
teams: action.payload,
};
default:
return state;
}
};
export default teamsReducer;
TeamsActions.ts
import { Dispatch } from 'redux';
import { Team } from '../../Models/TeamsModels';
/*FILE DEPENDENCIES*/
import { TeamsDispatchTypes, TEAMS_FAIL, TEAMS_SUCCESS } from './TeamsActionTypes';
export const GetTeams = () => (dispatch: Dispatch<TeamsDispatchTypes>) => {
try {
const newPayload: Team[] = [{ name: 'Team 1' }, { name: 'Team 2' }];
dispatch({
type: TEAMS_SUCCESS,
payload: newPayload,
});
} catch (e) {
dispatch({
type: TEAMS_FAIL,
});
}
};
TeamActionTypes.ts
import { Team } from '../../Models/TeamsModels';
export const TEAMS_LOADING = 'TEAMS_LOADING';
export const TEAMS_SUCCESS = 'TEAMS_SUCCESS';
export const TEAMS_FAIL = 'TEAMS_FAIL';
export interface TeamsLoading {
type: typeof TEAMS_LOADING;
}
export interface TeamsSuccess {
type: typeof TEAMS_SUCCESS;
payload: Team[];
}
export interface TeamsFail {
type: typeof TEAMS_FAIL;
}
export type TeamsDispatchTypes = TeamsLoading | TeamsFail | TeamsSuccess;
rootReducer.ts
import { combineReducers } from 'redux';
/*FILE DEPENDENCIES*/
import TeamsReducer from './Teams/teamsReducer';
const RootReducer = combineReducers({
teams: TeamsReducer,
});
export default RootReducer;
索引.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Component/App/App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import Store from './State/Store';
ReactDOM.render(
<Provider store={Store}>
<App />
</Provider>,
document.getElementById('root'),
);
reportWebVitals();
应用程序.tsx
import React from 'react';
import Navbar from '../Navbar/Navbar';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import './App.css';
function App(): JSX.Element {
return (
<div className="App">
<Router>
<Navbar></Navbar>
<Switch></Switch>
</Router>
</div>
);
}
export default App;
导航栏.tsx
import React from 'react';
import { NavLink } from 'react-router-dom';
import '../Navbar/Navbar.css';
import { RootStore } from '../../State/Store';
import { GetTeams } from '../../State/Teams/Actions/TeamsActions';
import { useDispatch, useSelector } from 'react-redux';
export default function Navbar(): JSX.Element {
const dispatch = useDispatch();
const teamsState = useSelector((state: RootStore) => state.teams);
//Is not updating store, need to look at this
const handleOnClick = () => {
dispatch(GetTeams());
};
console.log('Teams State: ', teamsState);
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<NavLink className="navbar-brand" to="/">
Navbar
</NavLink>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a className="dropdown-item" href="/add-team" onClick={handleOnClick}>
Add Team
</a>
{teamsState.teams &&
teamsState.teams.map((team) => (
<a className="dropdown-item" href={'/' + team.name} key={team.name}>
{team.name}
</a>
))}
</div>
</li>
</ul>
</div>
</nav>
);
}
解决方案
发生的情况是动作被调度并且团队被保存在该状态中,但随后整个页面立即刷新并且数据丢失。这是因为您的“添加团队”是一个a
带有href
标签的元素,因此单击该链接会调用handleOnClick
,但它也会导致导航。由于您只使用一个a
而不是Link
来自 react-router-dom,因此该导航事件未正确处理。
一旦我href
从“添加团队”链接中删除了团队,团队就开始出现,尽管如果它不是一个链接,那么使用它不是一个好习惯,a
因此您应该使用一个div
或其他一些 HTML 元素。单击单个团队名称仍然存在由于单击a
标签而丢失数据的相同问题,因此您将要在Link
此处使用。
推荐阅读
- javascript - 由 fancybox 插入的 AngularJS DOM 无法识别“{{}}”插值
- postgresql - pgBouncer - 2k 内存优化
- asp.net - ASP.NET 和 SSAS
- windows - 程序运行时无法从 mpg123 捕获诊断输出
- tomcat - 如何在tomcat的日志文件中停止DEBUG消息
- flink-streaming - 端到端完全一次示例代码
- javascript - 如何使用javascript添加当前月份日期作为html表中每个单独列的标题?
- android - 半透明状态栏在导航抽屉上保持半透明阴影
- javascript - 在一个 html 表格单元格中分层多个图像
- python - 如何使用python获取当前迭代循环列表的行