#javascript #reactjs #typescript #redux #react-redux
#javascript #reactjs #typescript #redux #react-redux
Вопрос:
Я новичок в stackoverflow и совершенно новичок в использовании react / redux. Я уже просматривал довольно много сообщений, чтобы узнать, может ли похожий пост дать мне ответ, но я все еще озадачен.
В настоящее время у меня есть презентационный компонент «Repetitions» и компонент контейнера для получения реквизитов из хранилища redux и отправки действий из презентационного компонента в хранилище redux. У меня есть презентационный компонент, обновляющий хранилище redux, когда я ввожу данные в поле ввода, но я хочу использовать хранилище redux для извлечения входного значения, чтобы при первом заходе пользователя на страницу входное значение было «0», поскольку это начальное значение внутри хранилища redux.
Изначально я создал простой компонент счетчика, используя react/redux, и он работал нормально. С тех пор я создал компонент «Repeat» и изменил хранилище redux для использования combinedreducer, и именно тогда, казалось, начались проблемы, поскольку ни один из компонентов не может считывать данные из хранилища redux.
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
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
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 amp; 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
note: When I try to console.log «repetitions» I am getting undefined at the moment.
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
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
);
Ожидаемыми результатами, которые я надеялся бы увидеть, будет «0», представленное в поле ввода под заголовком «Reps», когда пользователь впервые загружает страницу. Вместо этого поле пустое, но хранилище redux отображает значение для повторений как «0».
повторения-ввод-желаемые-результаты
Также стоит отметить, что счетчик под полем ввода раньше считывал «0» из хранилища redux, когда я впервые загрузил страницу, однако теперь он также не определен.
Спасибо, что нашли время, чтобы просмотреть мой пост. Любая помощь будет с благодарностью!
Ответ №1:
Хммм … что-то здесь не так:
Прежде всего, ваше состояние для повторения в настоящее время содержит объект. Он должен содержать простое число.
Во-вторых, имя состояния повторения в хранилище (из прикрепленного вами снимка) — «Repetitionreduce», а не «repetition», когда вы пытаетесь извлечь его в mapStateToProps:
const mapStateToProps = (state: RootState): StateFromProps => ({
repetitions: state.repetitions // <- this one here...
});
Надеюсь, это поможет 🙂
Комментарии:
1. Спасибо, Матти, твой ответ приблизил меня на 1 шаг! Я изменил имена комбинированных редукторов, чтобы они совпадали с редукторами, и теперь я получаю [object Object], возвращаемый из хранилища redux в поле ввода при загрузке страницы! Мне просто нужно выяснить, почему это объект, а не число. Еще раз спасибо!
2. @Ash Я думаю, что первая строка ответа объясняет, почему: у вас есть объект в этом редукторе вместо числа. Посмотрите на начальное состояние, которое вы объявляете.
3. Исправлено. Еще раз спасибо за вашу помощь, Матти!