[英]React presentational component unable to read value for <input /> from redux store using react container
I'm new to stackoverflow and quite new to using react/redux. 我是stackoverflow的新手,并且使用react / redux是一个新手。 I've been scanning over quite a few posts already to see if a similar post could provide me with an answer but I'm still left puzzled. 我已经扫描了很多帖子,看看是否有类似的帖子可以给我一个答案,但我仍然感到困惑。
I currently have a presentational component "Repetitions" and a container component to get props from redux store and dispatch actions from the presentational component to redux store. 我目前有一个演示组件“Repetitions”和一个容器组件,用于从redux store获取props,并从presentational组件到redux store调度操作。 I have the presentational component updating the redux store when I enter data into the input field but I am wanting to use the redux store to retrieve the input value so that when a user first comes on to the page the input value is "0" as that is the initial value inside the redux store. 当我在输入字段中输入数据时,我的表示组件更新了redux存储,但是我想使用redux存储来检索输入值,这样当用户第一次进入页面时输入值为“0”这是redux商店内的初始值。
I originally made a simple Counter component using react/redux and it was working ok. 我最初使用react / redux制作了一个简单的Counter组件,它工作正常。 I have since made the "Repetition" component and altered the redux store to use a combinedreducer and this is when the problems seemed to start as neither components can read from the redux store. 我已经制作了“Repetition”组件并更改了redux存储以使用combinedreducer,这就是问题似乎开始的时候,因为这两个组件都无法读取redux存储。
Rootreducer.ts Rootreducer.ts
import { combineReducers } from "redux";
import countReducer from "./example/reducer";
import repetitionsReducer from "./reps/reducer";
const rootReducer = combineReducers({
countReducer,
repetitionsReducer
})
export default rootReducer;
RepetitionsReducer.ts RepetitionsReducer.ts
import { RepetitionsState } from "../types";
import { AddRepetitionsAction } from "./actions";
export type RepetitionsActionType = AddRepetitionsAction;
export type Dispatch = (action: RepetitionsActionType) => void;
// The reducer updates the count
const initialState: RepetitionsState = {
repetitions: 0
};
const repetitionsReducer = (
state = initialState,
action: RepetitionsActionType
): RepetitionsState => {
switch (action.type) {
case "ADD_REPETITIONS":
return { ...state, repetitions: action.repetitions };
default:
return state;
}
}
export default repetitionsReducer;
RepetitionsContainer.ts RepetitionsContainer.ts
import { connect } from "react-redux";
import { RootState } from "../../store/types";
import { Dispatch } from "../../store/reps/reducer";
import { addRepetitions } from "../../store/reps/actions";
import Repetitions from "../../components/reps/Repetitions";
interface StateFromProps {
repetitions: number ;
}
interface DispatchFromProps {
updateRepetitions: (repetitions: number) => void;
}
export type RepetitionsProps = StateFromProps & DispatchFromProps;
const mapStateToProps = (state: RootState): StateFromProps => ({
repetitions: state.repetitions
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchFromProps => ({
updateRepetitions: (repetitions: number) => dispatch(addRepetitions(repetitions))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Repetitions);
RepetitionsComponent.ts RepetitionsComponent.ts
note: When I try to console.log "repetitions" I am getting undefined at the moment. 注意:当我尝试console.log“重复”时,我现在没有被定义。
import React from "react";
import { RepetitionsProps } from "../../containers/reps/Repetitions";
const Repetitions: React.FunctionComponent<RepetitionsProps> = ({
repetitions,
updateRepetitions
}) => {
console.log(repetitions)
return (
<div>
<h3>Reps</h3>
<input
onChange={(event) => updateRepetitions(Number(event.target.value))}
value={ repetitions } // <-- This is the value i'm wanting to present to the user from the redux store
/>
</div>
);
};
export default Repetitions;
App.ts App.ts
import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import Header from "./components/header/Header";
import { Provider } from "react-redux";
import { createStore } from "redux";
import Counter from "./containers/example/Counter";
import Repetitions from "./containers/reps/Repetitions";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "./store/reducer";
const store = createStore(rootReducer, composeWithDevTools());
console.log(store.getState())
function App() {
return (
<div className="App">
<Header title={"Rep count"} />
<Repetitions />
<br />
<br />
<br />
<Counter />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
The expected results I would be hoping to see would be a "0" presented in the input box underneath the "Reps" header when a user first loads the page. 当用户首次加载页面时,我希望看到的预期结果是“Reps”标题下面的输入框中显示的“0”。 Instead the box is empty but the redux store shows the value for repetitions as "0". 相反,该框为空,但redux商店将重复值显示为“0”。
reps-input-desired-results 代表输入期望的-结果
It is also worth noting that the counter below the input field used to read "0" from the redux store when I first loaded the page however now it is also undefined. 还值得注意的是,当我第一次加载页面时,输入字段下方的计数器用于从redux存储区读取“0”,但现在它也是未定义的。
Thank you for taking the time to look at my post. 感谢您抽出宝贵时间查看我的帖子。 Any help would be greatly appreciated! 任何帮助将不胜感激!
Hmmm... something is wrong here: 嗯......这里有些不对劲:
First of all, your state for repetition is currently holding an object. 首先,你的重复状态目前正在持有一个对象。 It should hold a simple number. 它应该包含一个简单的数字。
Secondly, the name of the repetition state on the store (from the snapshot you've attached) is "repetitionReducer" and not "repetition" as you try to fetch it in mapStateToProps: 其次,当您尝试在mapStateToProps中获取重复状态时,商店中的重复状态的名称(来自您附加的快照)是“repetitionReducer”而不是“重复”:
const mapStateToProps = (state: RootState): StateFromProps => ({
repetitions: state.repetitions // <- this one here...
});
Hope this helps :) 希望这可以帮助 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.